假设我们有一个prop组件类中的变量，我们通过模板中的插值使用它（堆栈闪电战演示):
组件类：
@Component({...})
export class AppComponent {
prop = 'Test';
...
}
模板：
<p>{{ this.prop }}</p>
<p>{{ prop }}</p>
为什么在 Angular 中可以使用this模板中的关键字没有任何警告/错误（即使在 AOT 模式下）？背后是什么？
Edit
根据答案中的评论：this 指为其呈现模板的组件本身。但我也可以创建一个模板变量并使用它访问它this:
<input #inp> {{ this.inp.value }}
在这种情况下，我们没有inp组件类中的变量，我仍然可以使用它来访问它{{this.inp...}}. Magic?
我不认为有人可以在这里给出非常准确的答案（也许来自 Angular CLI 团队的人），但是我得出的结果是组件渲染器完全忽略了this关键字在看起来有效的地方（有一些例外）。
Proof
<input #heroInput value="0">
This prints the component JSON without heroInput: {{ this | json }}
<input #heroInput value="0">
This prints 0: {{ this.heroInput.value }}
<div *ngFor="let val of [1,2,3]">
<input #heroInput [value]="val">
Overrides heroInput with current value: {{ this.heroInput.value }}
</div>
This prints 0: {{ this.heroInput.value }}
从上面可以假设this类似于 AngularJS (角度 1)scope，其中scope包含组件属性。
它没有解释为什么 HeroInput 没有列出在this | json still.
然而，以下内容完全被破坏：
{{ this['heroInput'].value }}
它给出了一个错误：无法获取value未定义的。它应该，不，它必须有效，除非（唯一的解释）this在每种情况下都被忽略但是
{{ this | json }}
其中它引用组件，因为这是从模板调试整个组件对象的唯一方法。也许还有一些其他例外。
Updated 堆栈闪电战
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
