如何在我的模板（Angular2 / TypeScript）中將HTML字符串轉換為HTML？

Question

我在dummy-data.ts文件中有這個對象。 通過服務我成功將其app.component.ts 。

{name:"Object1", 
    prop1: {key:'value', key:'value'},
    password: "P@ssword1",
    htmlText:'<h4>This is THE demo text</h4><p>I want it to display as HTML</p>'
}

目前app.component.ts看起來像這樣，簡單地開始：

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
        <p *ngFor="#plot of plots">
            {{plot.personalPanelText.transition}}
        </p>
`,
providers: [PlotService]  
})

最終結果是字符串而不是HTML。 我希望HTML是代碼，而不是帶HTML標簽的文本。

我嘗試了幾種方法，並在全球網和Angular2文檔中搜索，但找不到解決方案。

提前致謝！

Answer 1

您可以綁定到innerHtml如：

<div [innerHtml]="someProp.htmlText"></div>

Angular不會實例化任何與HTML中的標記或屬性匹配的選擇器以這種方式添加的組件，也不會解析任何綁定（例如{{xx}} ）

另請參見如何在Angular2中綁定原始html