詳解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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
angular.js 自帶jsonp，實現(xiàn)跨域，下面來實現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
下面小編就為大家?guī)硪黄獪\談angularjs依賴服務注入寫法的注意點。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
本篇文章主要介紹了Angular 4 指令快速入門教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
本篇文章主要介紹了Angular實現(xiàn)響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
AngularJS開發(fā)教程之控制器之間的通信方法分析
這篇文章主要介紹了AngularJS開發(fā)教程之控制器之間的通信方法,結(jié)合實例形式較為詳細的分析了AngularJS控制器之間通信的三種常用方式及相關使用技巧,需要的朋友可以參考下2016-12-12
后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
這篇文章主要介紹了后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法的相關資料,需要的朋友可以參考下2016-07-07
通過實例代碼給大家詳細講述了angular動態(tài)表單的制作方法，對此有需要的朋友參考下。2018-02-02
AngularJS自定義指令實現(xiàn)面包屑功能完整實例
這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結(jié)合完整實例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下2017-05-05