在 Angular 组件模板中使用 'this' 关键字

Question

假设我们在组件 class 中有一个 prop 变量，我们通过模板中的插值来使用它 (stackblitz demo):

组件class:

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

模板：

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

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

编辑

根据回答中的备注：this 指为其呈现模板的组件本身。但我也可以创建一个模板变量并使用 this:

访问它

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

在这种情况下，我们在组件 class 中没有 inp 变量，我仍然可以使用 {{this.inp...}} 访问它。魔术？

Answer 1

this 指为其呈现模板的组件本身。在模板上，您只能访问组件的 members。这意味着 this 被隐式添加到您在模板中使用的每个属性。

这两个访问是相同的 - 2nd 一个在它前面隐式使用 this。

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

在组件中使用this也是一样。当你想在组件中访问 prop 时，你需要在它前面加上 this.prop 以告知你正在访问组件的 property，而不是局部变量。

Answer 2

我不认为有人可以在这里给出非常准确的答案（也许是来自 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 (angular 1) scope，其中 scope 包含组件特性。

它没有解释为什么 heroInput 仍然没有在 this | json 中列出。

但是以下内容完全损坏：

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

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

{{ this | json }}

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

已更新stackblitz

Answer 3

我觉得我们无法对此做出正确的解释，但是，

我经历了一个动态创建组件成员的案例。
这里可能会出错，如果我不使用this.member（在我的例子中它实际上是this[member]）。
在组件中创建一个成员，例如

this.members(prop=> this[prop]={})
在模板中的用法就像，

{{this[prop]}} will give expected result.
{{prop}} will not give expected result because it will print value of list.

在 Angular 组件模板中使用 'this' 关键字

Using 'this' keyword in Angular component's template

html

data-binding

typescript

angular2-template

angular

我觉得我们无法对此做出正确的解释，但是，