angular - bypassSecurityTrustHtml 在使用 [innerHtml] 显示 html 时禁用锚标记
问题描述
我正在使用 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 链接工作?
谢谢你的时间。
解决方案
在做了一些调试之后,我发现我们不需要单独清理 html 字符串中的 url。
如果您使用管道bypassSecurityTrustHtml
并且它不能与锚标记链接一起正常工作,那么您可能会犯与我相同的错误。
解决方案
只需pure: false
从@Pipe({ name: 'keepHtml', pure: false })
. 通过这样做,您的管道将成为纯管道(pure: true
默认值)
只有当它检测到传递给管道的值或参数发生变化时,才会执行纯管道,在每个变化检测周期都会调用不纯管道。
推荐阅读
- css-selectors - Dojo 工具提示附加到多个节点:元素选择器有效,但类选择器无效
- macos - 在 MacOS 上,hunspell 在 Library/Spelling/ 中找不到现有的 .aff 和 .dic 文件
- excel - AND 在数组公式中嵌入的 IF 语句中不起作用
- docker - 为 docker 图像创建一个图标
- excel - 如何让携带消息显示 D 列中最后一个单元格的值?
- java - 使用 Apache Camel 的 Apache ActiveMQ 窃听
- c - 如何使用原子编辑器设置 SDL 库?
- php - 无法在 mysql 插入/更新函数上使用 try catch
- rest - Acumatica。休息 API。创建客户。错误
- vba - 多用户评估表宏