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

Posted 2023-05-07

【中文标题】我应该使用 [innerHTML] 还是通常的方式（Angular 2）

【英文标题】：Should I use [innerHTML] or the usual way (Angular 2)

【发布时间】：2016-10-22 06:35:38

【问题描述】：

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

我能做到：

<p> example </p>

我可以做到：

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

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

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

【问题讨论】：

如果页面在设置示例之前加载，第一种方式可能会导致用户在短时间内看到文字字符串“ example ”。出于这个原因，第二种方法更好。

即使我使用 Angular 2？

afaik，除非示例是实际的 html，否则您应该使用第一种方式。 innerHTML 用于实际的 html 标记

How to get angular2 [innerHtml] to work的可能重复

【参考方案1】：

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

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

而且，就担心 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”，这是最糟糕的部分！ :-(