angular6 解析HTML字符串

文章参考

1. Angular—显示html文本

问题描述

1. 使用插值表达式{{}}直接显示html内容，则html的标签不会被解析
2. <div class="content" [innerHTML]="article.content"></div>，虽然使用innerHTML属性可以正常显示html内容
   将HTML字符串以html标签显示出来，但是出于安全考虑，angular的净化机制会过滤掉某些内容，来帮你防范跨站脚本攻击（XSS）类的安全问题

解决办法 —— 管道（DomSanitizer）

新建一个用来过滤数据的管道，意思就是告诉angular，过我这个管道的数据就是安全的

创建管道

ng g p ./pipe/bypassSecurityTrustHtml --spec=false

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'bypassSecurityTrustHtml'
})
export class BypassSecurityTrustHtmlPipe implements PipeTransform {

  constructor(private domSanitizer: DomSanitizer) {}

  transform(html: any, args?: any): any {
    return this.domSanitizer.bypassSecurityTrustHtml(html);
  }

}

使用

<div class="content" [innerHTML]="article.content | bypassSecurityTrustHtml"></div>