代码之家 › 专栏 › 技术社区 › shohrukh

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

angular2-template data-binding typescript angular

2

shohrukh · 技术社区 · 8 年前

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

组件类:

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

模板:

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

为什么在角度上可以使用 this 模板中没有任何警告/错误的关键字(即使在AOT模式中)?它的背后是什么?

编辑

根据答案中的备注: 这 引用为其呈现模板的组件本身 . 但是我也可以创建一个模板变量并使用 这 :

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

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

2 回复 | 直到 8 年前

1

smnbbrv 8 年前

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

2

1

Suren Srapyan 8 年前

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

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

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

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