詳解angular如何調(diào)用HTML字符串的方法
前面的文章我們介紹過angular6.0的數(shù)據(jù)綁定，也就是前面頁面如何調(diào)用后臺(tái)的數(shù)據(jù)，我們接觸到了調(diào)用普通數(shù)據(jù)——如：調(diào)用產(chǎn)品詳情{{post.content}}。在使用中，我們會(huì)發(fā)現(xiàn)，如果按原來的方式angular6.0調(diào)用的數(shù)據(jù)是HTML字符串，前臺(tái)頁面顯示的依然是html字符串，而沒有正常顯示，如下圖：
這顯示不是我們想要的結(jié)果。那么，angular6.0如何調(diào)用HTML字符串?dāng)?shù)據(jù)呢？
angular6.0提供了一個(gè)屬性綁定來實(shí)現(xiàn)html字符串?dāng)?shù)據(jù)的綁定：
<ul [innerHTML]="post.content"></ul> 通過innerHTML屬性綁定調(diào)用產(chǎn)品詳情post.content
這時(shí)，產(chǎn)品詳情頁的數(shù)據(jù)已正常顯示——圖片文字都能正常顯示出來。而這時(shí)，又出現(xiàn)一個(gè)問題，在頁面控制臺(tái)會(huì)有警告提示：WARNING: sanitizing HTML stripped some content 如下圖：
頁面能正常輸出顯示，可見這個(gè)警告對(duì)頁面不影響。如果不介意，倒是可以忽略不計(jì)。但這對(duì)于我們開發(fā)者來說，畢竟不太如意，肯定是哪兒有問題呀。
這啥會(huì)出現(xiàn)這種情況？這是因?yàn)閍ngular的保護(hù)措施，防止xss攻擊。其實(shí)可以不不管它，畢竟不是錯(cuò)誤。如果不想看到這種警告信息，可以把產(chǎn)品詳情單獨(dú)出來進(jìn)行解析：
第一步：引入DomSanitizer
第二步：通過DomSanitizer來解析產(chǎn)品詳情，并賦值給一個(gè)變量屬性 post_content；
第三步：前臺(tái)調(diào)用時(shí)，用innerHTML屬性綁定這個(gè)post_content變量
通過這幾部，問題解決。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS ng-blur 指令詳解及簡單實(shí)例
本文主要介紹AngularJS ng-blur 指令，這里對(duì)ng-blur 指令的知識(shí)詳細(xì)介紹給大家，并給大家一個(gè)實(shí)例作為參考，有需要的小伙伴可以參考下2016-07-07
淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定
這篇文章主要介紹了淺談Angularjs中不同類型的雙向數(shù)據(jù)綁定，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
AngularJs定時(shí)器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時(shí)器$interval 和 $timeout詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
在項(xiàng)目中遇到這樣的需求想把下拉框的單選改為多選，怎么實(shí)現(xiàn)呢？下面小編通過本文給大家分享angularjs單選改為多選的開發(fā)過程及問題解析，需要的朋友參考下2017-02-02
Angularjs 實(shí)現(xiàn)一個(gè)幻燈片示例代碼
本文主要介紹Angularjs 寫一個(gè)幻燈片的知識(shí)，這里整理了詳細(xì)的資料，及實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖有需要的小伙伴可以參考下2016-09-09
這篇文章主要介紹了Angular2 (RC5) 路由與導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2016-09-09
詳解angular部署到iis出現(xiàn)404解決方案
這篇文章主要介紹了詳解angular部署到iis出現(xiàn)404解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Angular ElementRef簡介及其使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
在JavaScript的AngularJS庫中進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了在JavaScript的AngularJS庫中進(jìn)行單元測(cè)試的方法,主要針對(duì)AngularJS中的控制器相關(guān),需要的朋友可以參考下2015-06-06
AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框示例【可兼容IE8】
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)畫矩形框,涉及基于AngularJS的事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05