Angular HTML綁定我正在編寫一個Angular應用程序，我想要顯示一個HTML響應。我怎么做？如果我只是使用綁定語法，{{myVal}}它會編碼所有HTML字符（當然）。我需要以某種方式將a的內部html綁定div到變量值。
4 回答
眼眸繁星
TA貢獻1873條經驗 獲得超9個贊
[innerHtml] 在大多數情況下是很好的選擇，但是它會因為非常大的字符串或者在html中需要硬編碼樣式而失敗。
我想分享其他方法：
你需要做的就是在你的html文件中創建一個div并給它一些id：
<div #dataContainer></div>
然后，在Angular 2組件中，創建對此對象的引用（此處為TypeScript）：
import { Component, ViewChild, ElementRef } from '@angular/core';@Component({
templateUrl: "some html file"})export class MainPageComponent {
@ViewChild('dataContainer') dataContainer: ElementRef;
loadData(data) {
this.dataContainer.nativeElement.innerHTML = data;
}}然后只需使用loadData函數將一些文本附加到html元素。
這只是一種使用原生javascript的方式，但在Angular環境中。我不推薦它，因為使代碼更麻煩，但有時沒有其他選擇。
不負相思意
TA貢獻1777條經驗 獲得超10個贊
使用時，Html-Binding不起作用{{interpolation}}，改為使用“Expression”：
無效
<p [innerHTML]="{{item.anleser}}"></p>- >拋出錯誤（插值而不是預期的表達式）
正確
<p [innerHTML]="item.anleser"></p>
- >這是正確的方法。
您可以在表達式中添加其他元素，例如：
<p [innerHTML]="'<b>'+item.anleser+'</b>'"></p>
暗示
除了用于安全目的的清理之外，Angular不會以任何方式處理使用[innerHTML]（或通過其他類似element.appenChild()或類似的方式動態添加）添加的HTML 。
只有將HTML靜態添加到組件模板時，此類操作才有效。如果需要，可以在運行時創建一個組件，如我如何使用/創建動態模板以使用Angular 2.0編譯動態組件中所述？
- 4 回答
- 0 關注
- 1230 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消