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