Angular中innerHTML標簽的樣式不起作用的原因解析

1.背景

         在最近angular的項目中,需要用到[innerHTML]標簽來指定一個div的樣式：

 //HTML部分
 <div class="contents" [innerHTML]="contents"></div>

 //TS部分
 contents = '<p>商品信息欄位<br><span style="color:red;">商品信息介紹</span></p>';

        但是上面的樣式并不起作用，在Chorme中查看源碼，發現style標簽的樣式在Angular編譯的時候被屏蔽掉。這是為什么呢？客觀別急，請往下看。

2.解決方案

       先說解決方案，最后再分析出現這種問題的原因。修改上面的TS：

// 在使用的頁面引入DomSanitizer 
 import { DomSanitizer } from '@angular/platform-browser';
//構造方法里注入sanitizer對象
 constructor( private sanitizer: DomSanitizer
 ) { }
// 對HTML代碼做處理
 this.contents= this.sanitizer.bypassSecurityTrustHtml("<p>W3商品信息欄位<br><span style="color:red;">商品信息介紹</span></p>");

　　這樣雖然可以解決問題，但是這樣做還不夠：

•代碼冗余繁雜：如果我們的contents內容過大，這樣我們的代碼就顯得很亂，影響可讀性和美觀；
•不能復用：如果其他ts中也要用到innerHTML標簽，又要重新寫一遍上面的TS內容，沒有復用性；

      基于以上兩點，我們用自定義管道（pipe）來優化以上代碼，使用ng generate pipe safe-html命令來生成一個pipe，并做適當的修改：

// 對safe-html.pipe.ts做適當修改<br><br>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);
 }
}<br><br>// 在使用innerHTML標簽的屬性里使用以上safeHtml管道

<div class="contents" [innerHTML]="contents|safeHtml"></div>

3.原因及原理

           所以，為什么會出現上面的問題呢？原來，Angular中默認將所有輸入值視為不受信任。當我們通過 property，attribute，樣式，類綁定或插值等方式，

   將一個值從模板中插入到DOM中時，Angular會自幫我們清除和轉義不受信任的值。在開頭的例子中，span標簽里的樣式被屏蔽了，不信請看：

  Angular 在編譯的時候，會自動清理 HTML 輸入并轉義不安全的代碼，因此在這種情況下，style被屏蔽，樣式失效。這時候如果需要將樣式片段渲染出來，

 就需要用到DomSanitizer了。DomSanitizer 可以把值凈化為在不同 DOM 上下文中的安全內容，來幫我們防范跨站腳本攻擊（XSS）類的安全問題。

總結

以上所述是小編給大家介紹的Angular中innerHTML標簽的樣式不起作用的原因解析,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com