Angular 2 - 如何有选择地绑定包含HTML的字符串（一些允许的标签）

Question

我在我的应用中实施了一些简单的搜索和突出显示。

所以我在我的模板中有这个：

<span>{{myContent}}</span>

此myContent变量最初可能包含这样的数据（不安全，只能将其作为HTML）：

:param: (b (r :a:sync memo :o :idf:3.09 kg;/g/1<>11bwnh :score:0.3

我想要做的是提供搜索和突出显示的功能，所以我的第一个想法是使用regexp替换并将我的内容转换为这样的内容（假设搜索 备忘录 < /强>）：

:param: (b (r :a:sync <span style='background-color: yellow'>memo</span> :o :idf:3.09 kg;/g/1<>11bwnh :score:0.3

但是我遇到了如何安全渲染的问题。

我已经看到有关将包含HTML的字符串绑定到角度模板中的其他问题，但最新的问题涉及使用[innerHTML]，您需要信任整个HTML。

有没有办法告诉Angular只信任一组特定的标签？

另外我想到的是将搜索结果分成这样的块：

chunks = searchAndHighlight(myContent);
// chunks would be:
// [
//  {content: ':param: (b (r :a:sync ', html: false},
//  {content: '<span style='background-color: yellow'>memo</span>', html: true},
//  {content: ' :o :idf:3.09 kg;/g/1<>11bwnh :score:0.3', html: false},
// ]

然后在我的模板中使用类似的东西：

<span *ngFor="let chunk of chunks">
  <span *ngIf="chunk.html" [innerHTML]="chunk.content"></span>
  <span *ngIf="!chunk.html">{{chunk.content}}</span>
</span>

但我担心这可能会破坏我的应用程序的性能。我的应用程序实际上显示了一个巨大的数据树，我在每个节点上执行搜索，因此这个节点组件有数百个副本，每个都呈现一个数据（可能用搜索结果突出显示）

希望我能很好地描述这个问题，并没有压倒任何人。

谢谢！

Answer 1

您可以使用angular提供的C:\Users\rmcgu\AppData\Roaming\npm\nodemon。例如

DomSanitizer

这是如何使HTML信任成为角度的一些基本示例，您可以将此方法用于您的场景。