Angular：更改文本的自定义管道

Question

我有一个函数可以在 1 到 20 之间随机取一个数字。

我要执行的任务：当电梯在大厅时，使用自定义管道显示单词大厅而不是数字 1。

服务中的功能：

getNumbersInfinite(){
    return interval(1000).pipe(map(()=> Math.floor(Math.random() * 20) + 1));
  }

在组件中：

floor?: Observable<Number>;
  constructor(private randomNumberGen: RandomNumberGeneratorService) { }

  ngOnInit(): void {
    this.floor = this.randomNumberGen.getNumbersInfinite();
  }

html:

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

Answer 1

首先，创建管道replaceWordLoby.pipe.tsDOC

@Pipe({
    name: "replaceWordLoby",
})
export class ReplaceWordLobyPipe implements PipeTransform {
    transform(value: Number, ...args: unknown[]): string {
        // return word lobby 
    }
}

然后将 class 导入 your.module.ts 文件中的 declarations 数组

@NgModule({
    declarations: [ReplaceWordLobyPipe],
})
export class YourModule {}

现在您可以像这样使用它：

<p>
  {{ floor | async | replaceWordLoby }}
</p>

stackblitz

Angular：更改文本的自定义管道

Angular: custom pipe for change text

pipe

angular