@defer
Тип блока, который можно использовать для отложенной загрузки JavaScript-компонентов, директив и каналов, используемых в шаблоне компонента.
Синтаксис
@defer (on <trigger>; when <condition>; prefetch on <trigger>; prefetch when <condition>) {
<!-- deferred template fragment -->
<calendar-cmp />
} @placeholder (minimum? <duration>) {
<!-- placeholder template fragment -->
<p>Placeholder</p>
} @loading (minimum? <duration>; after? <duration>) {
<!-- loading template fragment -->
<img alt="loading image" src="loading.gif" />
} @error {
<!-- error template fragment -->
<p>An loading error occurred</p>
} Описание
Блоки
Поддерживаемые секции блока defer. Примечание: отложенно загружается только фрагмент шаблона блока @defer. Остальные необязательные блоки загружаются сразу.
| блок | Описание |
|---|---|
@defer | Отложенно загружаемый блок содержимого |
@placeholder | Содержимое, отображаемое до отложенной загрузки (необязательно) |
@loading | Содержимое, отображаемое во время отложенной загрузки (необязательно) |
@error | Содержимое, отображаемое при ошибках отложенной загрузки (необязательно) |
Триггеры
Триггеры задают условия, при которых происходит отложенная загрузка. Некоторые из них допускают необязательный параметр — переменную-ссылку на шаблон. Разделяйте несколько триггеров точкой с запятой.
| триггер | Срабатывает... |
|---|---|
on idle(<timeout>?) | когда браузер сообщает о состоянии бездействия (по умолчанию) |
on viewport(<elementRef>?) | когда элемент попадает в область просмотра |
on interaction(<elementRef>?) | при щелчке, касании или получении фокуса |
on hover(<elementRef>?) | когда на элемент наведён указатель |
on immediate | когда отрисовка страницы завершается |
on timer(<duration>) | по истечении указанного времени |
when <condition> | при выполнении пользовательского условия |
Предварительная загрузка
Настраивает предварительную загрузку блока defer, используемого в параметрах @defer, но не влияет на отображение. Отображение выполняется в соответствии со стандартными условиями on и when. Разделяйте несколько настроек предварительной загрузки точкой с запятой.
@defer (prefetch on <trigger>; prefetch when <condition>) {
<!-- deferred template fragment -->
}
ПОЛЕЗНО: Подробнее см. в руководстве по отложенной загрузке.
Super-powered by Google ©2010–2025.
Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.
https://angular.dev/api/core/@defer
