Angular 在自定义管道中添加标记

Question

我想创建一个自定义管道 highlightPipe，它添加一个 <mark> 以使用 css 类突出显示文本：

 {{ 'i am some random text' | highlight:'some' }}

将被翻译成

I am <mark>some</mark> random text

但是，当我实现管道时，结果会在最后一页中转义。例如，它确实显示 <mark>some</mark>

有没有办法告诉管道她可以添加真正的 HTML？

Answer 1

您需要使用 innerHtml 属性将内容显示为 html。

<div [innerHTML]="textToBeDisplay | highlight:'some'"></div>

还要确保在管道中也使用 DomSanitizer。

return this.domSanitizer.bypassSecurityTrustHtml(textToBeDisplay);