使用 [innerHTML] 进行数据绑定的最佳方式是 Angular 4答案

【问题标题】：Is it best way to data binding with [innerHTML], angular 4使用 [innerHTML] 进行数据绑定的最佳方式是 Angular 4
【发布时间】：2018-03-14 04:34:53
【问题描述】：

我的问题是，在 Angular 4 中，很少有方法可以将 HTML 数据绑定到 TS，例如 {{myText}}、[]、() 和其他我们可以使用的 [innerHTML]="myText"

在 {{}}、[innerHTML] 中将简单变量绑定到 HTML 的最佳方法是什么？

【问题讨论】：

它们用于不同的目的。表达式绑定 ({{}}) 输出原始文本，而 [innerHTML] 输出 HTML 格式的文本。什么是“最佳”取决于变量包含的内容。
如果它只是一个文本？

标签： html angular typescript data-binding

【解决方案1】：

试试这样：

<div [innerHTML]="htmlString"></div>

在打字稿文件中：

htmlString: string = "Hello world"; <!-- if want to display string -->
htmlString: string = "<h1>Hello world</h1>"; <!-- if want to display html element -->

【讨论】：

【解决方案2】：

用 {{yourText}} 绑定它是否不包含任何 HTML 标记

如果它有任何 HTML 标记，则用 [innerHTML] = "youText" 绑定它

【讨论】：