我应该使用[InnerHTML]还是常规方法（Angular 2）？

Question

我有一个example: string;变量在我的component.ts文件中。我知道至少两种方法可以输出这个变量：

第一种方法是：

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

而且我能够做到：

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

使用第一种方式时，我的IDE（phpStorm）告诉我变量是不必要的，因为我从未使用过它。但是当我使用第二种方式时，它表示我正在使用它。

这两种方法有区别吗？

- Eliya Cohen

---

第一种方式可能会导致用户在页面加载之前短暂地看到字面字符串“{{ example }}”，而第二种方法更好，因为可以避免这种情况。 - bryan60

即使我使用Angular 2？ - Eliya Cohen

据我所知，除非示例是实际的HTML，否则应使用第一种方式。innerHTML 用于实际的HTML标记。 - Rob Louie

可能是如何使angular2的[innerHtml]工作的重复问题。 - Cobus Kruger

Answer 1

根据 Angular 2 文档： https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding-or-interpolation-

没有技术原因可以偏向其中一种。我们更注重可读性，通常会选择插值表达式。我们建议制定编码风格规则，并选择符合规则且对当前任务最自然的形式。

至于担心 innerHTML 中有恶意脚本（你可能会更喜欢插值表达式），不用担心：

幸运的是，Angular 数据绑定会警惕危险的 HTML。在显示之前会对值进行净化处理。

所以，你可以自由选择。Angular 团队说他们更喜欢 {{example}}，因为它更易于阅读，我也倾向于同意他们的观点，但似乎两种方法都可以。

- Rob Louie

---

在IE Edge 41.16299.15.0中，当对未定义的字段使用innerHTML时，“null”会显示出来。如果使用插值或innerText，则不会显示。 - keza

@keza 我在IE11中遇到了同样的问题，想知道是否有人找到了解决办法。 - HisDivineShadow

Answer 2

我和你一样，使用的IDE也有同样的限制，这真是让人感到烦恼。不过要小心哦，你提出的两个选项并不相同。如果你想呈现HTML标记（以添加DOM元素到页面中），请使用：

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

如果你只希望输出字符串，不要绑定到此属性。可以使用插值表达式：

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

或者绑定到innerText:

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

为了证明它们是不同的，在组件中设置如下内容：

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

然后在您的模板中，包含这两个div:

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

你会发现段落呈现的方式不同 :-)

- BeetleJuice

---

这应该是被接受的答案。请注意：对于[innerHTML]，您必须在@Component中使用“encapsulation: ViewEncapsulation.None”，这就是最糟糕的部分！ :-( - Sourangshu Biswas