Question

阅读使用管道与在角度模板中调用函数的好处。请参见vid：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

您可以在类的管道上使用@Pipe装饰器。它应该实现PipeTransform接口，该接口需要实现一个transform方法，该方法获取值并返回一个新值。如果需要，transform可以采取其他参数。

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

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

用角度模板中的管道替换函数调用

1 个答案: