前面的文章我們介紹過angular6.0的數據綁定，也就是前面頁面如何調用后臺的數據，我們接觸到了調用普通數據――如：調用產品詳情{{post.content}}。在使用中，我們會發現，如果按原來的方式angular6.0調用的數據是HTML字符串，前臺頁面顯示的依然是html字符串，而沒有正常顯示，如下圖：

這顯示不是我們想要的結果。那么，angular6.0如何調用HTML字符串數據呢？

angular6.0提供了一個屬性綁定來實現html字符串數據的綁定：

<ul [innerHTML]="post.content"></ul> 通過innerHTML屬性綁定調用產品詳情post.content

這時，產品詳情頁的數據已正常顯示――圖片文字都能正常顯示出來。而這時，又出現一個問題，在頁面控制臺會有警告提示：WARNING: sanitizing HTML stripped some content  如下圖：

頁面能正常輸出顯示，可見這個警告對頁面不影響。如果不介意，倒是可以忽略不計。但這對于我們開發者來說，畢竟不太如意，肯定是哪兒有問題呀。

這啥會出現這種情況？這是因為angular的保護措施，防止xss攻擊。其實可以不不管它，畢竟不是錯誤。如果不想看到這種警告信息，可以把產品詳情單獨出來進行解析：

第一步：引入DomSanitizer

第二步：通過DomSanitizer來解析產品詳情，并賦值給一個變量屬性 post_content；

第三步：前臺調用時，用innerHTML屬性綁定這個post_content變量

通過這幾部，問題解決。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。