我有一个example: string;
变量在我的component.ts
文件中。我知道至少两种方法可以输出这个变量:
第一种方法是:
<p>{{ example }}</p>
而且我能够做到:
<p [innerHTML]="example"></p>
使用第一种方式时,我的IDE(phpStorm)告诉我变量是不必要的,因为我从未使用过它。但是当我使用第二种方式时,它表示我正在使用它。
这两种方法有区别吗?
我有一个example: string;
变量在我的component.ts
文件中。我知道至少两种方法可以输出这个变量:
第一种方法是:
<p>{{ example }}</p>
而且我能够做到:
<p [innerHTML]="example"></p>
使用第一种方式时,我的IDE(phpStorm)告诉我变量是不必要的,因为我从未使用过它。但是当我使用第二种方式时,它表示我正在使用它。
这两种方法有区别吗?
没有技术原因可以偏向其中一种。我们更注重可读性,通常会选择插值表达式。我们建议制定编码风格规则,并选择符合规则且对当前任务最自然的形式。
至于担心 innerHTML 中有恶意脚本(你可能会更喜欢插值表达式),不用担心:
幸运的是,Angular 数据绑定会警惕危险的 HTML。在显示之前会对值进行净化处理。
所以,你可以自由选择。Angular 团队说他们更喜欢 {{example}}
,因为它更易于阅读,我也倾向于同意他们的观点,但似乎两种方法都可以。
我和你一样,使用的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>