如何将 Angular2 管道应用于动态内容？

Question

我需要应用管道（转换）来格式化通过 API 提供的动态内容。数据实际上是通过自定义格式化程序应用的，该格式化程序基本上绑定到元素上的 [innerHTML]。问题是我追加的管道没有按要求应用。

例如，我收到以下值 AB123456D（英国，国民保险号），我想将其显示为所以 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

Angular 不以任何方式处理 [innerHtml]="..." 添加的内容。它只是按原样传递给浏览器。

如何将 Angular2 管道应用于动态内容？

How to apply Angular2 pipes to dynamic content?

javascript

angularjs

angular2-pipe

angular