どのように動的なコンテンツにAngular2パイプを適用するには？

Question

Iは、APIを介して提供される動的コンテンツをフォーマットするパイプ（変換）を適用する必要があります。データは、基本的に要素の[innerHTML]にバインドするカスタムフォーマッタを介して実際に適用されます。問題は、必要に応じて、私が追加したパイプが適用されないことです。

例えば、私は次の値AB123456D（UK、国民保険番号）を受けていると私はそうAB 12 34 45 D私に課せられた

制限があるようにそれを表示したいですそのデータは[innerHTML]を使用してバインディングを使用してフォーマットされ、テンプレートに挿入されます。

// template 
<span *ngSwitchWhen="'html'" [innerHTML]="display"></span> 


// helper function 
display(): string { 
    ... 
    return this.column.formatter.replace(/\{([^}]*)\}/g, (match, id) => _.get(this.data, id)); 
    ... 
} 

// formatter looks like this and my pipe's name is `ni` 
<div>{niNum} | ni</div> 

レンダリングするとき、私は以下を参照してください...

AB123456D | ni 

私は/見ることを期待したい...

AB 12 34 45 D 

これを実現する方法任意のアイデア、またはそれが可能なのかどうか？

Answer 1

角度は[innerHtml]="..."によって追加されたコンテンツを処理しません。そのままブラウザに渡されます。