首頁 > web前端 > js教程 > 主體

Angular4綁定html內容出現警告如何解決

小云云
發布: 2017-12-28 10:07:11
原創
1802 人瀏覽過

本文主要為大家介紹了關於Angular4綁定html內容出現警告的處理方法,文中透過範例程式碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。希望能幫助大家。

前言

眾所周知在Web前端開發中,我們經常會遇見需要動態的將一些來自後端或動態拼接的HTML字串綁定到頁面DOM顯示,特別是在內容管理系統(CMS:是Content Management System的縮寫),這樣的需求,更是到處皆是。但最近在Angular4綁定html內容的時候出現了警告,透過查找相關資料終於解決了,下面給同樣遇到這個問題的朋友們分享下,話不多說了,來一起看看詳細的介紹吧。

綁定html內容

如果用正常的方法去綁定的話,可能會出再這種警告

<p [innerHTML]="Catcha" ></p>
--------------------------------------- 
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 的图等,用上面代码转一下就可以了,就不会那那个错误了。
 }
}
登入後複製

相關推薦:

#Angular4中顯示CSS樣式的範例程式碼

詳解一個完整的Angular4 FormText 元件的實作方法

Angular4中項目的準備與環境建置作業

以上是Angular4綁定html內容出現警告如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板