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

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（角度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]}} 将给出预期的结果。
{{prop}} 不会给出预期的结果，因为它将显示列表的值。

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

3 个答案:

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