Переменные в шаблонах

В шаблонах Angular есть два типа объявлений переменных: локальные переменные шаблона и переменные ссылок на шаблон.

Локальные переменные шаблона с помощью @let

Синтаксис @let в Angular позволяет объявлять локальную переменную и повторно использовать её в шаблоне, подобно синтаксису let в JavaScript.

Использование @let

Используйте @let, чтобы объявить переменную, значение которой определяется результатом выражения шаблона. Angular автоматически поддерживает актуальность значения переменной в соответствии с заданным выражением, как и в случае с привязками.

@let name = user.name;
@let greeting = 'Hello, ' + name;
@let data = data$ | async;
@let pi = 3.14159;
@let coordinates = {x: 50, y: 100};
@let longExpression =
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
  'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
  'Ut enim ad minim veniam...';

Каждый блок @let может объявлять ровно одну переменную. Нельзя объявлять несколько переменных в одном блоке через запятую.

Обращение к значению @let

Объявив переменную с помощью @let, её можно повторно использовать в том же шаблоне:

@let user = user$ | async;

@if (user) {
  <h1>Hello, {{ user.name }}</h1>
  <user-avatar [photo]="user.photo" />

  <ul>
    @for (snack of user.favoriteSnacks; track snack.id) {
      <li>{{ snack.name }}</li>
    }
  </ul>

  <button (click)="update(user)">Update profile</button>
}

Возможность присваивания

Ключевое отличие @let от let в JavaScript состоит в том, что @let нельзя переназначить после объявления. Однако Angular автоматически поддерживает актуальность значения переменной в соответствии с заданным выражением.

@let value = 1;

<!-- Invalid - This does not work! -->
<button (click)="value = value + 1">Increment the value</button>

Область видимости переменных

Объявления @let имеют область видимости текущего представления и его потомков. Angular создаёт новое представление на границах компонентов и везде, где шаблон может содержать динамический контент, например в блоках управления потоком, блоках @defer или структурных директивах.

Поскольку объявления @let не поднимаются, к ним нельзя обращаться из родительских представлений или соседних представлений:

@let topLevel = value;

<div>
  @let insideDiv = value;
</div>

<!-- Valid -->
{{ topLevel }}
<!-- Valid -->
{{ insideDiv }}

@if (condition) {
  <!-- Valid -->
  {{ topLevel + insideDiv }}

  @let nested = value;

  @if (condition) {
    <!-- Valid -->
    {{ topLevel + insideDiv + nested }}
  }
}

<!-- Error, not hoisted from @if -->
{{ nested }}

Полный синтаксис

Формальное определение синтаксиса @let:

• Ключевое слово @let.
• За ним следуют один или несколько пробельных символов, кроме символов новой строки.
• За ними следует допустимое имя JavaScript и ноль или более пробельных символов.
• Затем следует символ = и ноль или более пробельных символов.
• Затем следует выражение Angular, которое может занимать несколько строк.
• В конце ставится символ ;.

Переменные ссылок на шаблон

Переменные ссылок на шаблон позволяют объявить переменную, которая ссылается на значение элемента в шаблоне.

Переменная ссылки на шаблон может ссылаться на:

• элемент DOM в шаблоне (включая пользовательские элементы)
• компонент или директиву Angular
• TemplateRef из элемента ng-template

С помощью переменных ссылок на шаблон можно считывать информацию из одной части шаблона в другой его части.

Объявление переменной ссылки на шаблон

Чтобы объявить переменную для элемента шаблона, добавьте атрибут, который начинается с символа решётки (#), за которым следует имя переменной.

<!-- Create a template reference variable named "taskInput", referring to the HTMLInputElement. -->
<input #taskInput placeholder="Enter task name" />

Назначение значений переменным ссылок на шаблон

Angular назначает переменным шаблона значения в зависимости от элемента, для которого они объявлены.

Если объявить переменную для компонента Angular, она будет ссылаться на экземпляр компонента.

<!-- The `startDate` variable is assigned the instance of `MyDatepicker`. -->
<my-datepicker #startDate />

Если объявить переменную для элемента <ng-template>, она будет ссылаться на экземпляр TemplateRef, представляющий шаблон. Подробнее см. в разделе Как Angular использует синтаксис со звёздочкой, * в статье Структурные директивы.

<!-- The `myFragment` variable is assigned the `TemplateRef` instance corresponding to this template fragment. -->
<ng-template #myFragment>
  <p>This is a template fragment</p>
</ng-template>

Если объявить переменную для любого другого отображаемого элемента, она будет ссылаться на экземпляр HTMLElement.

<!-- The "taskInput" variable refers to the HTMLInputElement instance. -->
<input #taskInput placeholder="Enter task name" />

Ссылка на директиву Angular

У директив Angular может быть свойство exportAs, задающее имя, по которому на директиву можно ссылаться в шаблоне:

@Directive({
  selector: '[dropZone]',
  exportAs: 'dropZone',
})
export class DropZone {
  /* ... */
}

Объявляя переменную шаблона для элемента, можно присвоить ей экземпляр директивы, указав это имя exportAs:

<!-- The `firstZone` variable refers to the `DropZone` directive instance. -->
<section dropZone #firstZone="dropZone">...</section>

Нельзя ссылаться на директиву, для которой не задано имя exportAs.

Использование переменных ссылок на шаблон с запросами

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

Чтобы выполнить запрос для конкретного элемента шаблона, объявите для него переменную шаблона, а затем запрашивайте элемент по имени этой переменной.

<input #description value="Original description" />

@Component({
  /* ... */,
  template: `<input #description value="Original description">`,
})
export class AppComponent {
  // Query for the input element based on the template variable name.
  @ViewChild('description') input: ElementRef | undefined;
}

Подробнее о запросах см. в разделе Ссылки на дочерние элементы с помощью запросов.

Область видимости переменных шаблона

Как и переменные в коде JavaScript или TypeScript, переменные шаблона доступны только в пределах шаблона, в котором они объявлены.

Аналогично, структурные директивы или объявления <ng-template> создают новую вложенную область видимости шаблона — подобно тому, как операторы управления потоком JavaScript, такие как if и for, создают новые лексические области видимости. Переменные шаблона внутри таких структурных директив недоступны за их пределами.

Доступ из вложенного шаблона

Внутренний шаблон может обращаться к переменным шаблона, объявленным во внешнем шаблоне.

В следующем примере изменение текста в <input> изменяет значение в <span>, поскольку Angular сразу же применяет изменения через переменную шаблона ref1.

<input #ref1 type="text" [(ngModel)]="firstExample" />

<span *ngIf="true">Value: {{ ref1.value }}</span>

В этом случае *ngIf для <span> создаёт новую область видимости шаблона, в которую входит переменная ref1 из родительской области видимости.

Однако обратиться к переменной шаблона из дочерней области видимости в родительском шаблоне не получится:

<input *ngIf="true" #ref2 type="text" [(ngModel)]="secondExample" />

<span>Value: {{ ref2?.value }}</span>

Здесь ref2 объявлена в дочерней области видимости, созданной с помощью *ngIf, и недоступна из родительского шаблона.