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

我不认为有人能给出非常准确的答案(可能是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 }}

从上面可以假设 这 类似于AngularJS(角度1) scope 那里 范围 包含组件属性。

它不能解释为什么海洛因不在 this | json 仍然。

但是,以下内容完全不完整:

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

它给出了一个错误:无法获取 value 未定义的除非(唯一的解释),否则它应该,而不是必须起作用。 这 在任何情况下都会被忽略,但是

{{ this | json }}

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

更新的 stackblitz

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

这两个入口是相同的 第二 一种含蓄的使用 这 在它前面。

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

使用时也是如此 这 在组件中。当你想访问 prop 在组件中,需要在其前面加前缀 this.prop 通知您正在访问 property 组件,而不是局部变量。