html – 带有超链接的Angular 5 DomSanitizer

概述我正在使用WYSIWYG编辑器(CKEditor)并尝试使用Angular 5呈现内容. 我想弄清楚的是在Angular 5中使用DomSanitizer的正确方法.我面临的问题是超链接在生成的清理HTML中不起作用(不是“可点击的”). 我使用以下Typescript代码返回safeHtml内容： public getSafeContent(): SafeHtml { return th 我正在使用WYSIWYG编辑器(CKEditor)并尝试使用Angular 5呈现内容.

我想弄清楚的是在Angular 5中使用DomSanitizer的正确方法.我面临的问题是超链接在生成的清理HTML中不起作用(不是“可点击的”).

我使用以下Typescript代码返回safeHtml内容：

public getSafeContent(): SafeHTML {    return this.sanitizer.bypassSecurityTrustHTML(this.page.content);}

并以这种方式在我的模板中使用它：

<div [INNERHTML]="getSafeContent()"></div>

这将呈现包含所有内联样式的HTML,但超链接将不起作用.

我尝试这样做：

public getSafeContent(): SafeHTML {    return this.sanitizer.sanitize(SecurityContext.HTML,this.page.content);}

这导致超链接实际工作,但内联样式不是.

有没有办法让样式和超链接与清理内容一起使用？

更新

这就是Chrome开发工具中页面的样子：

<div _ngcontent-c22="" >   <div _ngcontent-c22="" >        <div _ngcontent-c22="">            <p><a href="http://www.Google.com">Google</a></p>        </div>    </div></div>

并且谷歌链接不可点击.

解决方法 bypassSecurityTrustHTML允许< script>内容中的标签.对于URL,您需要bypassSecurityTrustUrl.见： https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustUrl.

我从来没有尝试过堆叠bypassXXX方法,所以我不知道你是否可以做这样的事情bypassSecurityTrustUrl(bypassSecurityTrustHTML(myContent))但我猜可能不会因为每个方法都需要一个字符串但返回一个对象(类型为SafeHTML) / SafeUrl),因此它不能用作需要字符串的堆栈函数调用的输入.

因此,您可能需要解析内容,将每个URL传递到bypassSecurityTrustUrl,然后再将所有内容重新组合在一起.

更新

我只是看了一下消毒方法.我没试过这个,但是这样的事可能有用：

this.sanitizer.sanitize(SecurityContext.HTML,this.sanitizer.bypassSecurityTrustUrl(myContent));

因为sanitize可以将SafeValue作为输入.内部bypassSecurityTrustUrl清理URL并返回一个SafeUrl,它由外部清理打开并用作输入以使其安全.就像我说的,我没有尝试过,但理论上它看起来不错……

总结

以上是内存溢出为你收集整理的html – 带有超链接的Angular 5 DomSanitizer全部内容，希望文章能够帮你解决html – 带有超链接的Angular 5 DomSanitizer所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。