如何解决当使用[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
是默认值)
仅当纯管道检测到传递给管道的值或参数发生变化时才会执行,因为每个变化检测周期都会调用不纯管道。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。