小編給大家分享一下Angular中innerHTML標(biāo)簽的樣式為什么不起作用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
1.背景
在最近angular的項目中,需要用到[innerHTML]標(biāo)簽來指定一個div的樣式：
//HTML部分
商品信息欄位
但是上面的樣式并不起作用，在Chorme中查看源碼，發(fā)現(xiàn)style標(biāo)簽的樣式在Angular編譯的時候被屏蔽掉。這是為什么呢？客觀別急，請往下看。
2.解決方案
先說解決方案，最后再分析出現(xiàn)這種問題的原因。修改上面的TS：
重慶分公司
重慶分公司
// 在使用的頁面引入DomSanitizer
import { DomSanitizer } from '@angular/platform-browser';
//構(gòu)造方法里注入sanitizer對象
constructor( private sanitizer: DomSanitizer
) { }
// 對HTML代碼做處理
this.contents= this.sanitizer.bypassSecurityTrustHtml("W3商品信息欄位
商品信息介紹
");這樣雖然可以解決問題，但是這樣做還不夠：
?代碼冗余繁雜：如果我們的contents內(nèi)容過大，這樣我們的代碼就顯得很亂，影響可讀性和美觀；
?不能復(fù)用：如果其他ts中也要用到innerHTML標(biāo)簽，又要重新寫一遍上面的TS內(nèi)容，沒有復(fù)用性；
基于以上兩點，我們用自定義管道（pipe）來優(yōu)化以上代碼，使用ng generate pipe safe-html命令來生成一個pipe，并做適當(dāng)?shù)男薷模?/p>
// 對safe-html.pipe.ts做適當(dāng)修改
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); } }
// 在使用innerHTML標(biāo)簽的屬性里使用以上safeHtml管道
3.原因及原理
所以，為什么會出現(xiàn)上面的問題呢？原來，Angular中默認將所有輸入值視為不受信任。當(dāng)我們通過 property，attribute，樣式，類綁定或插值等方式，
將一個值從模板中插入到DOM中時，Angular會自幫我們清除和轉(zhuǎn)義不受信任的值。在開頭的例子中，span標(biāo)簽里的樣式被屏蔽了，不信請看：
Angular 在編譯的時候，會自動清理 HTML 輸入并轉(zhuǎn)義不安全的代碼，因此在這種情況下，style被屏蔽，樣式失效。這時候如果需要將樣式片段渲染出來，
就需要用到DomSanitizer了。DomSanitizer 可以把值凈化為在不同 DOM 上下文中的安全內(nèi)容，來幫我們防范跨站腳本攻擊（XSS）類的安全問題。
以上是“Angular中innerHTML標(biāo)簽的樣式為什么不起作用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
