Использование ключевого слова this в шаблоне компонента Angular

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 в тех местах, где оно кажется действительным (за некоторыми исключениями).

Proof

<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 2

this относится к самому компоненту, для которого был обработан шаблон. По шаблону вы можете получить доступ только к members компонента. Это означает, что this неявно добавляется к каждому свойству, которое вы используете в шаблоне.

Эти два доступа одинаковы - 2-й один неявно использует this перед ним.

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

То же самое, когда вы используете this в компоненте. Если вы хотите получить доступ к prop в компоненте, вам нужно добавить к нему префикс this.prop, чтобы сообщить, что вы обращаетесь к property компонента, а не к локальной переменной.