当使用[innerHtml]

问题描述

我正在使用Angular10。我有一种方案来获取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链接正常工作？

感谢您的时间。

解决方法

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

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

解决方案

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

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

angular angular angular-dom-sanitizer