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

12.05.2022

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

Переменная шаблона может относиться к следующему:

• элемент DOM в шаблоне
• директива или компонент
• TemplateRef из ng-шаблона
• веб-компонент

Смотрите код для рабочего примера, содержащего фрагменты кода, приведенные в этом руководстве.

Предварительные условия

• Понимание шаблонов

Синтаксис

В шаблоне для объявления переменной шаблона используется хэш-символ #. Следующая переменная шаблона, #phone, объявляет переменную phone с элементом <input> в качестве значения.

<input #phone placeholder="phone number" />

Ссылка на переменную шаблона в любом месте шаблона компонента. Здесь <button> далее по шаблону ссылается на переменную phone.

<input #phone placeholder="phone number" />

<!-- lots of other elements -->

<!-- phone refers to the input element;
     pass its `value` to an event handler -->
<button type="button" (click)="callPhone(phone.value)">
    Call
</button>

Как Angular присваивает значения переменным шаблона

Angular присваивает переменной шаблона значение в зависимости от того, где вы объявили переменную:

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

• Если вы объявляете переменную в элементе <ng-template>, переменная ссылается на экземпляр TemplateRef, который представляет шаблон.

  Дополнительную информацию о <ng-template> смотрите в Как Angular использует синтаксис звездочки, *, в Структурные директивы.

Переменная, задающая имя

• Если переменная указывает имя в правой части, например #var="ngModel", переменная ссылается на директиву или компонент на элементе с соответствующим именем exportAs.

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

В большинстве случаев Angular устанавливает значение переменной шаблона на элемент, на котором она встречается. В предыдущем примере phone относится к номеру телефона <input>.

Обработчик нажатия кнопки передает значение <input> в метод callPhone() компонента.

Директива NgForm демонстрирует получение ссылки на другое значение путем обращения к имени директивы exportAs. В следующем примере переменная шаблона, itemForm, появляется три раза, разделенные HTML.

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
    <label for="name">Name</label>
    <input
        type="text"
        id="name"
        class="form-control"
        name="name"
        ngModel
        required
    />
    <button type="submit">Submit</button>
</form>

<div [hidden]="!itemForm.form.valid">
    <p>{{ submitMessage }}</p>
</div>

Без значения атрибута ngForm, ссылочным значением itemForm будет HTMLFormElement, <form>.

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

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

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

Аналогично, структурные директивы, такие как *ngIf и *ngFor, или объявления <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>
<!-- doesn't work -->

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

Входная переменная шаблона

Входная переменная шаблона — это переменная со значением, которое устанавливается при создании экземпляра этого шаблона. См: Написание структурных директив

Входные переменные шаблона можно увидеть в действии в длинной форме использования NgFor:

<ul>
    <ng-template ngFor let-hero [ngForOf]="heroes">
        <li>{{hero.name}}</li></ng-template
    >
</ul>

Директива NgFor будет инстанцировать этот один раз для каждого героя в массиве heroes и установит переменную hero для каждого экземпляра соответственно.

При инстанцировании <ng-шаблона> может быть передано несколько именованных значений, которые могут быть привязаны к различным входным переменным шаблона. В правой части объявления let- входной переменной можно указать, какое значение должно быть использовано для этой переменной.

Например, NgFor также предоставляет доступ к index каждого героя в массиве:

<ul>
    <ng-template
        ngFor
        let-hero
        let-i="index"
        [ngForOf]="heroes"
    >
        <li>
            Hero number {{i}}: {{hero.name}}
        </li></ng-template
    >
</ul>

Что дальше

• Написание структурных директив

Ссылки

• Understanding template variables

Комментарии