ng-template и ng-container
Определяйте и размещайте фрагменты шаблонов
«ng-template и ng-container» — бесплатный урок Angular Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Шаблоны, которые не отображаются
<ng-template> определяет фрагмент разметки, который не отображается, пока что-либо явно не создаст его экземпляр. Это основа структурных директив, таких как *ngIf.
Определение шаблона
Содержимое внутри <ng-template> остаётся неактивным. Чтобы использовать его в другом месте, назначьте ему переменную-ссылку.
<ng-template #empty>
<p>No items found.</p>
</ng-template>Отображение с помощью ngTemplateOutlet
Используйте ngTemplateOutlet, чтобы отобразить шаблон по ссылке.
<ng-container *ngTemplateOutlet="empty"></ng-container>
<ng-template #empty>
<p>No items found.</p>
</ng-template>Зачем нужен ng-container
<ng-container> — это логический элемент, отсутствующий в DOM, для группировки. Он позволяет применять директивы или группировать узлы, не добавляя в DOM дополнительный элемент-обёртку.
Отказ от лишних div-обёрток
Без ng-container Вам пришлось бы добавить бесполезный <div> только для размещения директивы. ng-container исчезает из отображаемого результата.
<ng-container *ngIf="user">
<h2>{{ user.name }}</h2>
<p>{{ user.email }}</p>
</ng-container>Группировка блоков управления
ng-container отлично подходит для оборачивания новых блоков управления без добавления элементов в DOM.
<ng-container *ngIf="ready">
@for (item of items; track item.id) {
<li>{{ item.name }}</li>
}
</ng-container>Контекст шаблона
Шаблоны могут получать объект контекста, предоставляя доступ к его значениям через переменные let-.
<ng-template #row let-name="name">
<p>{{ name }}</p>
</ng-template>
<ng-container
*ngTemplateOutlet="row; context: { name: 'Ada' }">
</ng-container>Значение контекста по умолчанию
Специальное значение контекста $implicit связывается с переменной let-, для которой не указан ключ.
<ng-template #item let-value>
<span>{{ value }}</span>
</ng-template>
<ng-container
*ngTemplateOutlet="item; context: { $implicit: 42 }">
</ng-container>Шаблоны как объекты первого класса
#ref у элемента <ng-template> является объектом TemplateRef. Его можно передать как @Input, чтобы компонент позволил потребителям настраивать части своего интерфейса.
emptyTemplate = input<TemplateRef<unknown>>();ng-container как узел размещения
ng-container также удобно использовать как узел размещения для динамических компонентов или шаблонов, сохраняя чистоту DOM.
<ng-container *ngComponentOutlet="widgetComponent">
</ng-container>Когда что использовать
ng-template: отложенная или переиспользуемая разметка. ng-container: группировка и размещение директив без добавления элементов в DOM. Часто они используются вместе.
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете ng-template и ng-container.
Итоги
Вы узнали, что <ng-template> хранит неактивную разметку, из которой можно создавать экземпляры и отображать её через ngTemplateOutlet (необязательно с контекстом), а <ng-container> группирует узлы или размещает директивы без добавления элементов в DOM.
Часто задаваемые вопросы
Урок «ng-template и ng-container» бесплатный?
Да — полный текст урока «ng-template и ng-container» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «ng-template и ng-container»?
Определяйте и размещайте фрагменты шаблонов Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «ng-template и ng-container»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проекция содержимого в один слот
- Проекция в несколько слотов с select
- ng-template и ng-container
- TemplateRef и ViewContainerRef