angular - 如何在 HTML 模板中使用作为@Input 传递的管道

Question

我制作了一个可重用的组件，它接受某个类的数组。现在我想将一个管道传递给这个组件，它将将该数组的每个元素转换为我想要的可视化表示。 (这取决于数组对象的类)。

现在我不知道如何在模板中直接使用这个Pipe。我设法让它与一个以编程方式调用管道的额外函数一起工作:

export class SingleCategoryFilterComponent<T> implements OnInit {

  @Input()
  possibleFilterValues: T[];
  @Input()
  displayPipe: PipeTransform;

  constructor() {}

  ngOnInit() {}

  transformValue(value: T) {
    return this.displayPipe.transform(value);
  }

}

和(部分)模板:

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{transformValue(value)}}
</button>

但我宁愿不必创建此转换函数，而只需能够执行以下操作:

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{value | displayPipe}}
</button>

但这似乎不起作用，因为 displayPipe 未注册。有没有办法在模板中使用变量@Input displayPipe？

Answer 1

如果您在模板中使用为您处理此问题的包装管并传入 displayPipe 怎么样？管道作为管道 transform 的参数方法。类似于下面的内容(可能需要进行某种调整以适应您的问题，但您明白了)

在模板中，

<button mat-menu-item *ngFor="let value of possibleFilterValues">
    {{value | wrappingPipe:displayPipe}}
</button>

包装管，

@Pipe({
  name: 'wrappingPipe'
})
export class WrappingPipe implements PipeTransform {
  transform(value: any, displayPipe?: PipeTransform): any {
    if(value !== undefined) {
      return displayPipe && displayPipe.transform ? displayPipe.transform(value) : value;
    } else {
      return value;
    }
  }
}