Angular2有条件地逃避HTML

Question

我在Angular2上构建一个博客，该博客从Wordpress.com博客http://forrestswork.com加载内容，并在HTML转义时遇到麻烦。

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以使用DomSanitizer服务来转义某些HTML /网址/等。

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>