Angular2有条件地逃脱HTML

Question

我在angular2上构建了一个博客，该博客从wordpress.com博客，http://forrestswork.com加载内容，并因HTML Escaping而遇到麻烦。

InnerHTML指令运行良好，但是HTML_Sanitizer正在删除所有逃逸，包括代码示例，因此我的组件代码示例无法正确渲染。

<section class="content" [innerHtml]="post.content"></section>

是否有一种方法可以强迫角度忽略html的内容块？

Answer 1

您可以使用DomSanitizer服务来逃脱一些HTML/url/等。

根据文档：

您可以通过注入domsanitizer并调用以下方法之一来标记一个值：

• bypassSecurityTrustHtml
• bypassSecurityTrustScript
• bypassSecurityTrustStyle
• bypassSecurityTrustUrl
• bypassSecurityTrustResourceUrl

因此您可以这样逃脱HTML：

constructor(private sanitizer: DomSanitizer) {
  let dangerousHtml = '<script>alert("hello")</script>';
  this.trustedHtml = sanitizer.bypassSecurityTrustHtml(dangerousHtml);

在您的模板中：

<section class="content" [innerHtml]="trustedHtml"></section>