bypassSecurityTrustHtml在使用[innerHtml]显示html时禁用锚标记

Question

我使用的是Angular 10。我有一个场景来获取html字符串(富文本编辑器返回的值(并在我的应用程序中显示它(使用innerHtml(。我会得到各种风格，如背景色，字体颜色，高亮文本，超链接等。

我通过管道使用bypassSecurityTrustHtml(代码如下(，因此将考虑使用<styles>标签。

// sanitizeHtml.pipe.ts
@Pipe({ name: 'keepHtml', pure: false })
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}
transform(content) {
return this.sanitizer.bypassSecurityTrustHtml(content);
}
}

现在的问题是，当我得到超链接文本<a href="http://www.someurl.com> click here </a>时，这些锚链接不起作用。因此，当我点击链接时，它不会打开href链接。

我见过像使用bypassSecurityTrustResourceUrl这样的解决方案。但是我不能使用它，因为我不能单独从html内容中解析url。

正如其他SO问题中所建议的那样，我也尝试使用下面的两个函数，但也无济于事。。

[innerHtml]="myHtmlContent | keepHtml | keepUrl"

[innerHtml]="myHtmlContent | keepUrl | keepHtml" // tried to reorder the pipe still didn't work

有没有一种方法可以在使用bypassSecurityTrustHtml函数时使锚标记的href链接正常工作？

谢谢你抽出时间。

Answer 1

经过一些调试，我发现我们不需要单独清理html字符串中的url。

如果您将管道与bypassSecurityTrustHtml一起使用，并且它不能与锚标记链接一起正常工作，那么您可能会犯与我相同的错误。

---

解决方案

只需从@Pipe({ name: 'keepHtml', pure: false })中删除pure: false。通过这样做，您的管道将变成纯管道(因为pure: true是默认值(

只有当检测到传递给管道的值或参数发生变化时，才会执行纯管道，在每个变化检测周期中，都会调用不纯管道。