在 angular 模板中用管道替换函数调用

Question

了解在 angular 模板中使用管道与调用函数的优势。在此处查看视频：https://www.youtube.com/watch?v=I6ZvpdRM1eQ

我的 template.html

中有这个功能

<h1 [class]="alignText()" [innerHtml]="data.text"></h1>

还有我的函数component.template.ts

  alignText(): string {
    let defaultText = "center";
    return "text-" + (this.text || defaultText)
  }

有人建议我如何将 html alignText() 与管道一致以实现相同的结果吗？

Answer 1

请参阅 Angular 关于管道的文档：https://angular.io/guide/pipes

您可以在 class 管道上使用 @Pipe 装饰器。它应该实现 PipeTransform 接口，该接口需要实现一个 transform 方法，该方法接受值和 returns 一个新值。 transform 如果需要可以接受额外的参数。

@Pipe({ name: 'alignClass' })
export class AlignClassPipe implements PipeTransform {
  transform(value: string): string {
    return `text-${value || "center"}`;
  }
}

将此管道添加到模块中的 declarations。现在您可以使用 [class]="text | alignClass"

在 angular 模板中用管道替换函数调用

Replace function call with pipe in angular template

angular-pipe

angular