Angular如何创建自定义管道实现楼层值为1时显示lobby

1. 生成自定义管道文件 #

在项目根目录执行Angular CLI命令快速生成管道骨架：

ng g p floor-display

命令执行完成后会自动生成管道文件，传统模式下会自动在对应模块完成声明，独立组件模式下会生成带standalone标识的管道。

2. 编写管道转换逻辑 #

打开生成的floor-display.pipe.ts文件，写入以下转换逻辑：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'floorDisplay',
  // 独立组件开发模式请打开下面这行注释
  // standalone: true
})
export class FloorDisplayPipe implements PipeTransform {
  transform(floorValue: number | undefined): string | number | undefined {
    // 楼层值为1时返回大堂对应文本
    if (floorValue === 1) {
      return 'lobby';
    }
    // 其余楼层直接返回原始数字
    return floorValue;
  }
}

注意：如果项目使用独立组件（Standalone Component）开发模式，请打开standalone: true的注释，不需要在NgModule中额外声明管道。

3. 注册/引入管道 #

• 传统NgModule模式：确认管道已经被加入到当前组件所属模块的declarations数组中（CLI自动生成时会自动完成注册，手动创建的管道需要自行添加）
• 独立组件模式：在使用管道的组件的imports数组中引入FloorDisplayPipe即可

4. 修改模板调用管道 #

调整模板中的管道调用顺序，先用async管道解包Observable得到具体楼层数值，再传入自定义管道做显示转换，修改后的模板代码如下：

<div class="elevator">
<pre class="floor">{{ this.floor | async | floorDisplay }}</pre>
</div>

管道顺序不能颠倒：如果把floorDisplay写在async前面，管道接收到的参数会是Observable对象而非具体楼层数字，转换逻辑会完全失效。

内容的提问来源于stack exchange，提问作者Yosef Abada