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

Question

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

我能做到：

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

我能做到：

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

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

我应该使用哪种方法？

Answer 1

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

  

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

并且，关注innerHTML有恶意 其中的脚本（你可能赞成插亵的另一个原因）：

  

幸运的是，Angular数据绑定警告危险的HTML。它   在显示它们之前清理它们。

所以，这真的取决于你。 Angular团队表示他们赞成{{ example }}，因为它更容易阅读，我倾向于同意它们，但似乎你可以采取任何一种方式。

Answer 2

我的IDE与你的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>

您会看到段落的呈现方式不同： - ）