Angular 4中如何顯示內(nèi)容的CSS樣式示例代碼
前言
在開始本文的正文之前，我們先來看一下angular2中將帶標(biāo)簽的文本輸出在頁面上的相關(guān)內(nèi)容，為了系統(tǒng)性的防范XSS問題，Angular默認(rèn)把所有值都當(dāng)做不可信任的。 當(dāng)值從模板中以屬性（Property）、DOM元素屬性（Attribte)、CSS類綁定或插值表達(dá)式等途徑插入到DOM中的時(shí)候， Angular將對(duì)這些值進(jìn)行無害化處理（Sanitize），對(duì)不可信的值進(jìn)行編碼。
h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
[innerHTML]="htmlSnippet"
這個(gè)屬性可以識(shí)別 HTML標(biāo)簽 但不識(shí)別標(biāo)簽中的屬性值
發(fā)現(xiàn)問題
大家都知道Angular 中有 innerHTML 屬性來設(shè)置要顯示的內(nèi)容，但是如果內(nèi)容包含 CSS 樣式，無法顯示樣式的效果。
比如：
public content: string = "<div style='font-size:30px'>Hello Angular</div>"; <p [innerHTML]="content"></p>
只會(huì)顯示 Hello World ,字體不會(huì)是 30px，也就是 CSS 樣式?jīng)]有效果。
解決方案
自定義一個(gè) Pipe 來對(duì)內(nèi)容做轉(zhuǎn)換?？聪旅娲a。
寫一個(gè) HtmlPipe 類
import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
name: "html"
})
export class HtmlPipe implements PipeTransform{
constructor (private sanitizer: DomSanitizer) {
}
transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style);
}
}
在需要的模塊里面引入管道 HtmlPipe
@NgModule({
declarations: [
HtmlPipe
]
})
在 innerHtml 中增加管道名字
<p [innerHTML]="content | html"></p>
這樣就可以顯示 content 的 CSS 樣式。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- AngularJS使用ng-class動(dòng)態(tài)增減class樣式的方法示例
- 詳解AngularJS ng-class樣式切換
- AngularJS表格樣式簡(jiǎn)單設(shè)置方法示例
- AngularJs定制樣式插入到ueditor中的問題小結(jié)
- Angular5給組件本身的標(biāo)簽添加樣式class的方法
- Angular使用動(dòng)態(tài)加載組件方法實(shí)現(xiàn)Dialog的示例
- angularJS實(shí)現(xiàn)動(dòng)態(tài)添加,刪除div方法
- AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例
- AngularJS實(shí)現(xiàn)動(dòng)態(tài)切換樣式的方法分析
相關(guān)文章
angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例（debounce）
這篇文章主要介紹了angular.js和vue.js中實(shí)現(xiàn)函數(shù)去抖示例（debounce）,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了angular中的默認(rèn)路由的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
本文主要介紹AngularJS ng-href 指令,這里對(duì)ng-href 基礎(chǔ)資料進(jìn)行詳細(xì)介紹,并附代碼實(shí)例,有興趣的小伙伴可以參考下2016-08-08
詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程
本篇文章主要介紹了詳解基于Angular4+ server render(服務(wù)端渲染)開發(fā)教程 ，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了AngularJS路由用法,簡(jiǎn)單分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以參考下2017-05-05
Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法
本篇文章主要介紹了Angular中ng-options下拉數(shù)據(jù)默認(rèn)值的設(shè)定方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了詳解Angular操作cookies方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了簡(jiǎn)述Angular 5 快速入門，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法分析
這篇文章主要介紹了AngularJS實(shí)現(xiàn)圖片上傳和預(yù)覽功能的方法,結(jié)合HTML5實(shí)例形式對(duì)比分析了AngularJS圖片上傳的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-11-11
AngularJs unit-testing（單元測(cè)試）詳解
本文主要介紹AngularJs unit-testing（單元測(cè)試）的內(nèi)容，這里整理了單元測(cè)試的知識(shí)，及示例代碼，有興趣的朋友可以參考下2016-09-09