在 Angular 组件的模板中使用“this”关键字

Question

假设我们prop在组件类中有一个变量，我们通过模板中的插值来使用它（stackblitz demo）：

组件类：

@Component({...})
export class AppComponent  {
  prop = 'Test';
  ...
}

模板：

<p>{{ this.prop }}</p>
<p>{{ prop }}</p>

为什么在 Angular 中可以this在模板中使用关键字而没有任何警告/错误（即使在 AOT 模式下）？它的背后是什么？

编辑

根据答案中的注释：this 指的是为其呈现模板的组件本身。但我也可以创建一个模板变量并使用this以下方法访问它：

<input #inp> {{ this.inp.value }}

在这种情况下，我们inp在组件类中没有变量，我仍然可以使用{{this.inp...}}. 魔法？

Answer 1

我不认为有人可以在这里给出非常准确的答案（也许是来自 Angular CLI 团队的人），但是我得出的结果是组件渲染器完全忽略了看起来this有效的地方的关键字（有一些例外）。

证明

<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 (Angular1) 类似scope，其中scope包含组件属性。

它没有解释为什么 HeroInput 没有被列在this | jsonstill 中。

然而，以下内容完全被破坏：

{{ this['heroInput'].value }}

它给出了一个错误：无法获取value未定义。它应该，不，它必须起作用，除非（唯一的解释）this在每种情况下都被忽略，但是

{{ this | json }}

其中它引用组件，因为这是从模板调试整个组件对象的唯一方法。也许还有一些其他例外。

更新了堆栈闪电战