angular中綁定的innerHtml內部樣式不起作用的問題

問題：使用innerHtml綁定的內容在頁面上不顯示相應的樣式

如：

listItem = "測試<span style='color:red'>紅色</span>字體";

<div [innerHtml]="listItem"></div>

在瀏覽器中查看時，div中的內容是"測試<span>紅色</span>字體"，定義的樣式沒有了

解決：使用pipe

safe-html.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

safe-html.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SafeHtmlPipe } from "@shared/pipe/safe-html/safe-html.pipe";
@NgModule({
    imports: [
        CommonModule,
    ],
    declarations: [SafeHtmlPipe],
    exports: [SafeHtmlPipe]
})
export class SafeHtmlModule{ }

引入SafeHtmlModule，將<div [innerHtml]="listItem"></div>改為<div [innerHtml]="listItem | safeHtml"></div>即可。

---

說明：DomSanitizer

　　作用
　　DomSanitizer有助於防止跨站點腳本安全漏洞（XSS），通過清除值以便在不同的DOM上下文中安全使用。

　　為什么會需要使用DomSanitizer
　　Angular4中默認將所有輸入值視為不受信任。當我們通過 property，attribute，樣式，類綁定或插值等方式，將一個值從模板中插入到DOM中時，Angular4會自幫我們清除和轉義不受信任的值。