参考
问题描述
使用插值表达式{{}}直接显示html内容,则html的标签不会被解析
解决办法
innerHTML
<div class="content" [innerHTML]="article.content"></div>
问题
- 虽然使用innerHTML属性可以正常显示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>