在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)生以下結果：
Plain Text Example & <strong>Bold Text Example</strong>
HTML 實體和 HTML 元素沒有被渲染。
現(xiàn)在，讓我們考慮一個在這個字符串上使用 [innerHTML] 屬性綁定的模板：
<div [innerHTML]="htmlStr"></div>
重新編譯后，這段代碼將產(chǎn)生以下結果：
Plain Text Example & Bold Text Example
注意到 HTML 實體和 HTML 元素被渲染了。
第二步 — 理解限制
渲染 HTML 通常會引入跨站腳本攻擊（XSS）的潛在風險。渲染的 HTML 可能包含惡意腳本，構成安全問題。
解決 XSS 的一種方法是限制 HTML 元素和屬性的種類，只允許一組已知的“安全”元素和屬性。
在幕后，[innerHTML] 使用 Angular 的 DomSanitizer，它使用一組經(jīng)過批準的 HTML 元素和屬性。
這將限制你的 [innerHTML] 值不能使用 <script> 和 <style> 標簽以及 style 屬性。在選擇使用 [innerHTML] 時要牢記這一限制。
結論
在本文中，你了解了 Angular 2+ 中 [innerHTML] 屬性綁定的用法。它將渲染字符串中包含的 HTML 標記。
到此這篇關于在Angular中使用innerHTML屬性綁定的方法的文章就介紹到這了,更多相關Angular innerHTML屬性綁定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Angular2 路由問題修復詳解的相關資料,并建了一個測試工程，把詳細的過程分享給大家，需要的朋友可以參考下2017-03-03
本文給大家?guī)硪欢魏喍檀a實現(xiàn)angularjs彈性布局效果，非常實用，對angularjs彈出布局知識感興趣的朋友可以參考下2016-08-08
指令（Directives）是所有AngularJS應用最重要的部分。盡管AngularJS已經(jīng)提供了非常豐富的指令，但還是經(jīng)常需要創(chuàng)建應用特定的指令2016-03-03
AngularJS定時器的使用與移除操作方法【interval與timeout】
這篇文章主要介紹了AngularJS定時器的使用與移除操作方法,結合實例形式分析了AngularJS中interval與timeout方法的相關使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了AngularJS前端頁面操作之用戶修改密碼功能,結合具體實例形式分析了AngularJS針對前端用戶修改密碼的判斷操作實現(xiàn)技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了AngularJS $injector 依賴注入的相關資料,需要的朋友可以參考下2016-09-09
詳解Angular 4.x 動態(tài)創(chuàng)建組件
本篇文章主要介紹了詳解Angular 4.x 動態(tài)創(chuàng)建組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS誕生于2009年，由Misko Hevery 等人創(chuàng)建，后為Google所收購。這篇文章主要帶著大家理解Angular數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-01-01
本文主要介紹了AngularJS ng-if 指令,在這里整理了一些ng-if 指令的基礎資料,并有實例代碼,有需要的同學可以參考下2016-08-08
Angular 4根據(jù)組件名稱動態(tài)創(chuàng)建出組件的方法教程
組件是我們在學習angular中必不可少的一部分，下面這篇文章主要給大家介紹了關于Angular 4如何根據(jù)組件名稱動態(tài)創(chuàng)建出組件的相關資料，文中通過圖文與示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11