angular innerHtml样式不生效

例如：
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上下文中安全使用。

1. 添加管道 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);
    }
}

2. 修改html
   将<div [innerHtml]="myStyle"></div>改为<div [innerHtml]="myStyle | safeHtml"></div>即可