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