在Angular中使用innerHTML屬性綁定的方法
簡介
Angular 2+ 支持使用 [innerHTML] 屬性綁定來渲染 HTML。如果你使用插值，它會被視為字符串。
本文將介紹如何使用 [innerHTML] 以及一些注意事項。
先決條件
如果你想跟著本文學習，你需要：
- 對 Angular 插值和屬性綁定有一定了解會更有幫助。
第一步 — 使用 innerHTML
假設你正在處理一個包含純文本和 HTML 實體和元素混合的字符串的組件：
export class ExampleComponent {
htmlStr: string = 'Plain Text Example & <strong>Bold Text Example</strong>';
}
讓我們考慮一個在這個字符串上使用插值的模板：
<div>{{ htmlStr }}</div>
編譯后，這段代碼將產(chǎn)生以下結(jié)果：
Plain Text Example & <strong>Bold Text Example</strong>
HTML 實體和 HTML 元素沒有被渲染。
現(xiàn)在，讓我們考慮一個在這個字符串上使用 [innerHTML] 屬性綁定的模板：
<div [innerHTML]="htmlStr"></div>
重新編譯后，這段代碼將產(chǎn)生以下結(jié)果：
Plain Text Example & Bold Text Example
注意到 HTML 實體和 HTML 元素被渲染了。
第二步 — 理解限制
渲染 HTML 通常會引入跨站腳本攻擊（XSS）的潛在風險。渲染的 HTML 可能包含惡意腳本，構成安全問題。
解決 XSS 的一種方法是限制 HTML 元素和屬性的種類，只允許一組已知的“安全”元素和屬性。
在幕后，[innerHTML] 使用 Angular 的 DomSanitizer，它使用一組經(jīng)過批準的 HTML 元素和屬性。
這將限制你的 [innerHTML] 值不能使用 <script> 和 <style> 標簽以及 style 屬性。在選擇使用 [innerHTML] 時要牢記這一限制。
結(jié)論
在本文中，你了解了 Angular 2+ 中 [innerHTML] 屬性綁定的用法。它將渲染字符串中包含的 HTML 標記。
到此這篇關于在Angular中使用innerHTML屬性綁定的方法的文章就介紹到這了,更多相關Angular innerHTML屬性綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
詳解AngularJS controller調(diào)用factory
本篇文章主要介紹了詳解AngularJS controller調(diào)用factory，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了AngularJS表單驗證功能,結(jié)合具體實例形式分析了AngularJS表單驗證的操作步驟、實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2017-05-05
AngularJS中update兩次出現(xiàn)$promise屬性無法識別的解決方法
最近在工作中用AngularJS中update了兩次之后發(fā)現(xiàn)$promise屬性無法識別了，后來通過查找相關的資料終于解決了，想著記錄下方便自己或者有需要的朋友，所以本文主要介紹了AngularJS中update兩次出現(xiàn)了$promise屬性無法識別的解決方法,需要的朋友可以參考借鑒。2017-01-01
這篇文章主要介紹了AngularJS的通信機制,AngularJS是非常具有人氣的JavaScript庫,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了angularjs的一些優(yōu)化小技巧,本文總結(jié)了5種優(yōu)化技巧,如一次綁定、盡可能少調(diào)用 ng-repeat、盡量在指令里寫原生語法、頁面內(nèi)盡量少用filters等,需要的朋友可以參考下2014-12-12
今天小編就為大家分享一篇angular2 組件之間通過service互相傳遞的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
簡介AngularJS中使用factory和service的方法
這篇文章主要簡單介紹了AngularJS中使用factory和service的方法,主要針對自定義工廠和服務的創(chuàng)建來講,需要的朋友可以參考下2015-06-06
本篇文章主要介紹了淺談Angular HttpClient 簡單入門，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
angular4模塊中給標簽添加背景圖的實現(xiàn)方法
下面小編就為大家?guī)硪黄猘ngular4模塊中給標簽添加背景圖的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09