Angular2 有条件地转义 HTML答案

【问题标题】：Angular2 Conditionally Escape HTMLAngular2 有条件地转义 HTML
【发布时间】：2016-12-19 16:23:52
【问题描述】：

我正在 Angular2 上构建一个博客，该博客从 Wordpress.com 博客http://forrestswork.com 加载内容，但遇到了 HTML 转义问题。

innerHtml 指令效果很好，但 html_sanitizer 正在删除所有转义，包括代码示例，因此我的组件代码示例无法正确呈现。

&lt;section class="content" [innerHtml]="post.content"&gt;&lt;/section&gt;

有没有办法强制 Angular 在转义 HTML 时忽略内容块？

【问题讨论】：

您能否提供一个 Plunker 来演示消毒剂导致问题的内容？您可以提供自己的消毒剂实施。

标签： angular

【解决方案1】：

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

According to the docs:

您可以通过注入 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>

【讨论】：

有没有办法在不编写自定义清理函数的情况下有条件地执行此操作？我想转义
```
 标记中的所有 HTML，并接受其他所有内容作为安全 HTML。
```