angular怎么調(diào)用HTML字符串的方法

這篇文章將為大家詳細講解有關(guān)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變量

通過這幾部，問題解決。

關(guān)于“angular怎么調(diào)用HTML字符串的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。