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