小編給大家分享一下Angular中innerHTML標(biāo)簽的樣式為什么不起作用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

公司主營(yíng)業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)公司推出德保免費(fèi)做網(wǎng)站回饋大家。

1.背景

         在最近angular的項(xiàng)目中,需要用到[innerHTML]標(biāo)簽來(lái)指定一個(gè)div的樣式：

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

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

        但是上面的樣式并不起作用，在Chorme中查看源碼，發(fā)現(xiàn)style標(biāo)簽的樣式在Angular編譯的時(shí)候被屏蔽掉。這是為什么呢？客觀別急，請(qǐng)往下看。

2.解決方案

       先說(shuō)解決方案，最后再分析出現(xiàn)這種問(wèn)題的原因。修改上面的TS：

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

　　這樣雖然可以解決問(wèn)題，但是這樣做還不夠：

?代碼冗余繁雜：如果我們的contents內(nèi)容過(guò)大，這樣我們的代碼就顯得很亂，影響可讀性和美觀；
?不能復(fù)用：如果其他ts中也要用到innerHTML標(biāo)簽，又要重新寫一遍上面的TS內(nèi)容，沒(méi)有復(fù)用性；

      基于以上兩點(diǎn)，我們用自定義管道（pipe）來(lái)優(yōu)化以上代碼，使用ng generate pipe safe-html命令來(lái)生成一個(gè)pipe，并做適當(dāng)?shù)男薷模?/p>

// 對(duì)safe-html.pipe.ts做適當(dāng)修改<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標(biāo)簽的屬性里使用以上safeHtml管道

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

3.原因及原理

           所以，為什么會(huì)出現(xiàn)上面的問(wèn)題呢？原來(lái)，Angular中默認(rèn)將所有輸入值視為不受信任。當(dāng)我們通過(guò) property，attribute，樣式，類綁定或插值等方式，

   將一個(gè)值從模板中插入到DOM中時(shí)，Angular會(huì)自幫我們清除和轉(zhuǎn)義不受信任的值。在開(kāi)頭的例子中，span標(biāo)簽里的樣式被屏蔽了，不信請(qǐng)看：

   　　　　

  Angular 在編譯的時(shí)候，會(huì)自動(dòng)清理 HTML 輸入并轉(zhuǎn)義不安全的代碼，因此在這種情況下，style被屏蔽，樣式失效。這時(shí)候如果需要將樣式片段渲染出來(lái)，

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

以上是“Angular中innerHTML標(biāo)簽的樣式為什么不起作用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：Angular中innerHTML標(biāo)簽的樣式為什么不起作用-創(chuàng)新互聯(lián)
本文來(lái)源：http://chinadenli.net/article44/diidhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、微信小程序、定制開(kāi)發(fā)、動(dòng)態(tài)網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)