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

【问题标题】：bypassSecurityTrustHtml disables anchor tag while displaying html using [innerHtml]bypassSecurityTrustHtml 在使用 [innerHtml] 显示 html 时禁用锚标记
【发布时间】：2020-09-02 15:48:02
【问题描述】：

我正在使用 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 链接正常工作？

感谢您的宝贵时间。

【问题讨论】：

标签： angular angular-dom-sanitizer

【解决方案1】：

在做了一些调试之后，我发现我们不需要单独清理 html 字符串中的 url。

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

解决方案

只需从@Pipe({ name: 'keepHtml', pure: false }) 中删除pure: false。这样你的管道就会变成纯管道（pure: true 是默认值）

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

【讨论】：