我应该使用 [innerHTML] 还是通常的方式（Angular 2）答案

【问题标题】：Should I use [innerHTML] or the usual way (Angular 2)我应该使用 [innerHTML] 还是通常的方式（Angular 2）
【发布时间】：2016-10-22 06:35:38
【问题描述】：

我的example: string; 在我的component.ts 文件中。我可以通过两种方式输出这个变量（至少我知道）：

我能做到：

<p>{{ example }}</p>

我可以做到：

<p [innerHTML]="example"></p>

好吧，当我使用第一种方式时，我的 IDE (phpStorm) 告诉我我的 var 是不必要的，因为我从未使用过它。但是当我使用第二种方式时，它说我正在使用它。

我应该使用哪种方法有关系吗？

【问题讨论】：

【解决方案1】：

没有技术上的理由偏爱一种形式而不是另一种形式。我们倾斜朝向可读性，这往往有利于插值。我们建议建立编码风格规则并选择两者的形式符合规则，对手头的任务感觉最自然。

而且，就担心 innerHTML 有恶意其中的脚本（您可能喜欢插值的另一个原因）：

幸运的是，Angular 数据绑定对危险的 HTML 保持警惕。它在显示之前对值进行清理。

所以，这真的取决于你。 Angular 团队说他们喜欢{{ example }}，因为它更容易阅读，我倾向于同意他们的观点，但似乎你可以选择任何一种方式。

【讨论】：

在 IE Edge 41.16299.15.0 中，在未定义的字段上使用 innerHTML 时显示“null”。如果您使用插值或innerText，它不会显示。
@keza 我在 IE11 中遇到了同样的问题，想知道是否有人找到了解决方案。

【解决方案2】：

我的 IDE 和你的有同样的限制，这很烦人。但请注意，您提供的两个选项并不相同。如果要呈现 HTML 标记（将 DOM 元素添加到页面），请使用：

<p [innerHTML]="example"></p>

如果您希望只输出字符串，不要绑定到此属性。要么使用插值：

<p>{{ example }}</p>

或者绑定到innerText:

<p [innerText]="example"></p>

为了证明它们不同，在Component中，设置：

example = '<h3>Am I big?</h3>'

然后在你的模板中，有两个 div：

<p [innerText]="example"></p>
<p [innerHTML]="example"></p>

您会看到段落呈现不同:-)

【讨论】：

这应该是公认的答案。注意：如果是 [innerHTML]，您必须在 @Component 中使用“封装：ViewEncapsulation.None”，这是最糟糕的部分！ :-(