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