Eli*_*hen 4 javascript directive innerhtml typescript angular
我有我example: string;的component.ts档案。我可以通过两种方式（至少我知道）输出此变量：
我可以：
<p>{{ example }}</p>
我可以做：
<p [innerHTML]="example"></p>
好吧，当我使用第一种方法时，我的IDE（phpStorm）告诉我我的var是不必要的，因为我从未使用过它。但是当我使用第二种方法时，它表示我正在使用它。
我应该使用哪种方法有关系吗？
根据Angular 2文档：https：//angular.io/docs/ts/latest/guide/template-syntax.html#！＃property-binding-or- interpolation-
没有技术上的理由偏爱一种形式。我们倾向于可读性，这倾向于内插。我们建议建立编码样式规则，并选择既符合规则又对手头工作感到自然的形式。
而且，至于担心innerHTML中包含恶意脚本（另一个原因，您可能更喜欢进行中介）：
幸运的是，Angular数据绑定对于危险的HTML处于戒备状态。在显示值之前，它会清除值。
因此，实际上取决于您。Angular团队表示，他们喜欢{{ example }}这样做是因为它更易于阅读，而且我倾向于同意他们的观点，但似乎您可以选择任何一种方式。
我的 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>
你会看到段落的呈现方式不同:-)
| 归档时间： |
|
| 查看次数： |
2994 次 |
| 最近记录： |