bypassSecurityTrustHtml 在使用 [innerHtml] 显示 html 时禁用锚标记
bypassSecurityTrustHtml disables anchor tag while displaying html using [innerHtml]
我正在使用 Angular 10。我有一个方案可以获取 html 字符串(富文本编辑器返回的值)并将其显示在我的应用程序中(使用 innerHtml
)。我将获得各种样式,例如背景颜色、字体颜色、高亮文本、hyperlinks 等。
我正在通过管道使用 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);
}
}
现在的问题是,当我收到 hyperlink 文本 <a href="http://www.someurl.com> click here </a>
时,这些锚点 link 不起作用。因此,当我单击 link 时,它不会打开 href link.
我见过使用 bypassSecurityTrustResourceUrl
等解决方案。但我无法使用它,因为我无法单独从 html 内容中解析 url。
我也尝试使用其他 SO 问题中建议的如下两个功能,但它也无济于事..
[innerHtml]="myHtmlContent | keepHtml | keepUrl"
[innerHtml]="myHtmlContent | keepUrl | keepHtml" // tried to reorder the pipe still didn't work
有没有办法在使用 bypassSecurityTrustHtml 函数时使锚标记的 href link 正常工作?
感谢您的宝贵时间。
经过一些调试后,我发现我们不需要单独清理 html 字符串中的 url。
如果您将管道与 bypassSecurityTrustHtml
一起使用并且它不能与锚标记链接一起正常工作,那么您可能会犯与我相同的错误。
解决方案
只需从 @Pipe({ name: 'keepHtml', pure: false })
中删除 pure: false
。通过这样做,您的管道将成为纯管道(因为 pure: true
是默认值)
仅当检测到传递给管道的值或参数发生变化时,才会执行纯管道,因为每个变化检测周期都会调用非纯管道。
我正在使用 Angular 10。我有一个方案可以获取 html 字符串(富文本编辑器返回的值)并将其显示在我的应用程序中(使用 innerHtml
)。我将获得各种样式,例如背景颜色、字体颜色、高亮文本、hyperlinks 等。
我正在通过管道使用 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);
}
}
现在的问题是,当我收到 hyperlink 文本 <a href="http://www.someurl.com> click here </a>
时,这些锚点 link 不起作用。因此,当我单击 link 时,它不会打开 href link.
我见过使用 bypassSecurityTrustResourceUrl
等解决方案。但我无法使用它,因为我无法单独从 html 内容中解析 url。
我也尝试使用其他 SO 问题中建议的如下两个功能,但它也无济于事..
[innerHtml]="myHtmlContent | keepHtml | keepUrl"
[innerHtml]="myHtmlContent | keepUrl | keepHtml" // tried to reorder the pipe still didn't work
有没有办法在使用 bypassSecurityTrustHtml 函数时使锚标记的 href link 正常工作?
感谢您的宝贵时间。
经过一些调试后,我发现我们不需要单独清理 html 字符串中的 url。
如果您将管道与 bypassSecurityTrustHtml
一起使用并且它不能与锚标记链接一起正常工作,那么您可能会犯与我相同的错误。
解决方案
只需从 @Pipe({ name: 'keepHtml', pure: false })
中删除 pure: false
。通过这样做,您的管道将成为纯管道(因为 pure: true
是默认值)
仅当检测到传递给管道的值或参数发生变化时,才会执行纯管道,因为每个变化检测周期都会调用非纯管道。