您好,登錄后才能下訂單哦!
前言
眾所周知在Web前端開發中,我們經常會遇見需要動態的將一些來自后端或者是動態拼接的HTML字符串綁定到頁面DOM顯示,特別是在內容管理系統(CMS:是Content Management System的縮寫),這樣的需求,更是遍地皆是。但是最近在Angular4綁定html內容的時候出現了警告,通過查找相關資料終于解決了,下面給同樣遇到這個問題的朋友們分享下,話不多說了,來一起看看詳細的介紹吧。
綁定html內容
如果用正常的方法去綁定的話,可能會出再這種警告
<div [innerHTML]="Catcha" ></div> --------------------------------------- WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
而且頁面上也顯示不出東西來。
在網上找了一些,說要寫指令對其進行轉,好麻煩,從官網也找到一個種辦法。
bypassSecurityTrustHtml 用這個來進行安裝轉換。
在返回的結果對內容,或內容字段進行轉換,當然要使用 bypassSecurityTrustHtml 的話,還是要依賴注入 DomSanitizer 服務,
import { DomSanitizer } from '@angular/platform-browser'; export class myPage1{ constructor(private sanitizer: DomSanitizer) { } onInit():void{ this.Catcha = this.sanitizer.bypassSecurityTrustHtml('要進行轉換的內容'); // 這里比如返回的一個html內容,或是其它如一張 svg 的圖等,用上面代碼轉一下就可以了,就不會那那個錯誤了。 } }
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對億速云的支持。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。