Перейти к содержанию

Шаблонные утверждения

Шаблонные утверждения — это методы или свойства, которые вы можете использовать в HTML для реагирования на события пользователя. С помощью утверждений шаблонов ваше приложение может привлекать пользователей к таким действиям, как отображение динамического содержимого или отправка форм.

Смотрите Синтаксис шаблона для синтаксиса и фрагментов кода в этом руководстве.

В следующем примере шаблонное утверждение deleteHero() заключается в кавычки справа от знака равенства =, как в (event)="statement".

1
2
3
<button type="button" (click)="deleteHero()">
    Delete hero
</button>

Когда пользователь нажимает кнопку Удалить героя, Angular вызывает метод deleteHero() в классе компонента.

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

Реагирование на события — это аспект однонаправленного потока данных Angular . Вы можете изменить что угодно в своем приложении в течение одного цикла событий.

Синтаксис

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

Кроме того, парсер шаблонных выражений специально поддерживает как базовое присваивание (=), так и цепочку выражений с запятой (;).

Следующий синтаксис JavaScript и шаблонных выражений недопустим:

  • new
  • Операторы инкремента и декремента, ++ и --
  • Операторы присваивания, такие как += и -=
  • битовые операторы, такие как | и &
  • Оператор pipe operator

Контекст утверждения

У утверждений есть контекст — определенная часть приложения, к которой относится утверждение.

Утверждения могут ссылаться только на то, что находится в контексте утверждения, который обычно является экземпляром компонента. Например, deleteHero() из (click)="deleteHero()" является методом компонента в следующем фрагменте.

1
2
3
<button type="button" (click)="deleteHero()">
    Delete hero
</button>

Контекст утверждения может также ссылаться на свойства собственного контекста шаблона. В следующем примере метод обработки события компонента onSave() принимает в качестве аргумента собственный объект шаблона $event.

В следующих двух строках метод deleteHero() принимает входную переменную шаблона, hero, а onSubmit() принимает переменную ссылки шаблона, #heroForm.

1
2
3
4
5
6
7
8
9
<button type="button" (click)="onSave($event)">Save</button>
<button
    type="button"
    *ngFor="let hero of heroes"
    (click)="deleteHero(hero)"
>
    {{hero.name}}
</button>
<form #heroForm (ngSubmit)="onSubmit(heroForm)">...</form>

В этом примере контекстом объекта $event, hero и #heroForm является шаблон.

Имена контекстов шаблонов имеют приоритет над именами контекстов компонентов. В предыдущем примере deleteHero(hero), hero является входной переменной шаблона, а не свойством hero компонента.

Передовые методы работы с утверждениями

Практика Подробности
Краткость Используйте вызовы методов или базовые присваивания свойств, чтобы сделать шаблонное утверждение минимальным.
Работайте в контексте Контекстом шаблонного утверждения может быть экземпляр класса компонента или шаблон. Поэтому утверждения шаблона не могут ссылаться на что-либо в глобальном пространстве имен, например, window или document. Например, утверждения шаблона не могут вызывать console.log() или Math.max().

📅 28.02.2022

Комментарии