Синтаксис шаблонов
В Angular шаблон — это фрагмент HTML. Используйте специальный синтаксис внутри шаблона, чтобы задействовать многие возможности Angular.
СОВЕТ: Ознакомьтесь с разделом Основы перед изучением этого подробного руководства.
Каждый компонент Angular имеет шаблон (template), который определяет DOM, который компонент рендерит на странице. Используя шаблоны, Angular может автоматически поддерживать актуальность вашей страницы при изменении данных.
Шаблоны обычно находятся либо в свойстве template файла *.component.ts, либо в файле *.component.html. Чтобы
узнать больше, ознакомьтесь с подробным руководством по компонентам.
Как работают шаблоны?
Шаблоны основаны на синтаксисе HTML с дополнительными возможностями, такими как встроенные функции шаблонов, привязка данных, прослушивание событий, переменные и многое другое.
Angular компилирует шаблоны в JavaScript, чтобы создать внутреннее представление вашего приложения. Одним из преимуществ этого являются встроенные оптимизации рендеринга, которые Angular применяет к вашему приложению автоматически.
Отличия от стандартного HTML
Некоторые различия между шаблонами и стандартным синтаксисом HTML включают:
- Комментарии в исходном коде шаблона не включаются в отрисованный вывод.
- Элементы компонентов и директив могут быть самозакрывающимися (например,
<UserProfile />). - Атрибуты с определенными символами (т.е.
[],(), и т.д.) имеют особое значение для Angular. См. документацию по привязке и документацию по добавлению слушателей событий для получения дополнительной информации. - Символ
@имеет особое значение для Angular для добавления динамического поведения, такого как управление потоком (control flow), в шаблоны. Вы можете включить литеральный символ@, экранируя его как HTML-сущность (@или@). - Angular игнорирует и сворачивает ненужные пробельные символы. См. пробелы в шаблонах для получения более подробной информации.
- Angular может добавлять узлы комментариев на страницу в качестве заполнителей для динамического контента, но разработчики могут их игнорировать.
Кроме того, хотя большая часть синтаксиса HTML является допустимым синтаксисом шаблона, Angular не поддерживает элемент
<script> в шаблонах. Для получения дополнительной информации см. страницу Безопасность.
Что дальше?
Вас также может заинтересовать следующее:
| Темы | Подробности |
|---|---|
| Привязка динамического текста, свойств и атрибутов | Привязка динамических данных к тексту, свойствам и атрибутам. |
| Добавление слушателей событий | Реагирование на события в ваших шаблонах. |
| Двусторонняя привязка | Одновременная привязка значения и распространение изменений. |
| Управление потоком (Control flow) | Условное отображение, скрытие и повторение элементов. |
| Пайпы (Pipes) | Декларативное преобразование данных. |
| Вставка дочернего контента с ng-content | Управление тем, как компоненты рендерят контент. |
| Создание фрагментов шаблона с ng-template | Объявление фрагмента шаблона. |
| Группировка элементов с ng-container | Группировка нескольких элементов вместе или отметка места для рендеринга. |
| Переменные в шаблонах | Узнайте об объявлении переменных. |
| Отложенная загрузка с @defer | Создание откладываемых представлений с @defer. |
| Синтаксис выражений | Узнайте о сходствах и различиях между выражениями Angular и стандартным JavaScript. |
| Пробелы в шаблонах | Узнайте, как Angular обрабатывает пробелы. |