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

Question

我正在我的应用程序中实现一些简单的搜索和突出显示。

所以我的模板中有这个:

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

还有这个myContent变量最初可能包含这样的数据(仅作为 HTML 不安全):

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

我想做的是提供搜索和突出显示功能，所以我的第一个想法是使用正则表达式替换并将我的内容转换为类似这样的内容(假设搜索 memo):

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

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

我见过有关将包含 HTML 的字符串绑定(bind)到 Angular 模板的其他问题，但最新的一个讨论了使用 [innerHTML]并且您需要信任整个 HTML。

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

我想到的另一种方法是将搜索结果分成这样的 block :

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>

但我担心这可能会降低我的应用程序的性能。我的应用程序实际上显示了一棵巨大的数据树，我在其中对每个节点执行搜索，因此该 Node 组件有数百个副本，每个副本都会呈现一条数据(可能会在搜索结果中突出显示)。

希望我很好地描述了问题并且没有让任何人不知所措。

谢谢!

Answer 1

您可以使用DomSanitizer由 Angular 提供。例如

import { DomSanitizer } from "@angular/platform-browser"; myHtml: any = '<p> Some Paragraph </p>'; constructor(private sanitizer: DomSanitizer){ this.myHtml = this.sanitizer.bypassSecurityTrustHtml(this.myHtml); }

这是如何使 HTML 对于 Angular 而言可信的一些基本示例，您可以在您的场景中使用此方法。