例如：
ts:
let myStyle = "<span style='color:blue'>江南</span>style";
html:
<div [innerHtml]="myStyle"></div>
最终结果是:
<span>江南</span>style
原因:
Angular2默认将所有输入值视为不受信任。当我们通过 property，attribute，样式，类绑定或插值等方式，将一个值从模板中插入到DOM中时，Angular会自动清除和转义不受信任的值。
解决：
使用DomSanitizer, DomSanitizer有助于防止跨站点脚本安全漏洞（XSS），通过清除值以便在不同的DOM上下文中安全使用。
- 添加管道
safe-html.pipeline.ts
import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipeLine implements PipeTransform {
constructor(private sanitized: DomSanitizer) { }
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
- 修改html
将<div [innerHtml]="myStyle"></div>改为<div [innerHtml]="myStyle | safeHtml"></div>即可
