HTMLテンプレートで@Inputとして渡されたPipeの使用

Question

特定のクラスの配列を受け入れる再利用可能なComponentを作成しました。今は、このコンポーネントにパイプを渡して、その配列の各要素を必要な視覚表現に変換したいと思います。 （これは配列オブジェクトのクラスによって変わります）。

今このテンプレートをテンプレートで直接使用する方法がわかりません。

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

テンプレートでこれを処理するラッパーパイプを使用し、パイプのtransformメソッドの引数としてdisplayPipeパイプを渡すのはどうでしょうか。私の知る限りでは、テンプレートで

、

<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; 
    } 
    } 
}