angular6.x 字符串解析为HTML代码

参考

问题描述

使用插值表达式{{}}直接显示html内容，则html的标签不会被解析

解决办法

innerHTML

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

问题

1. 虽然使用innerHTML属性可以正常显示html内容
2. 但是出于安全考虑，angular的净化机制会过滤掉某些内容，来帮你防范跨站脚本攻击（XSS）类的安全问题

DomSanitizer

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

1. 创建管道

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

2. 定义管道

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);
  }

}

3. 使用(使用前面定义的管道)

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