TemplateRef и ViewContainerRef
Динамически отображайте шаблоны
«TemplateRef и ViewContainerRef» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Императивное отображение
Иногда содержимое необходимо отображать программно, а не декларативно. Angular предоставляет TemplateRef и ViewContainerRef для такого низкоуровневого управления.
TemplateRef
TemplateRef — это ссылка на <ng-template>. Она представляет разметку, экземпляр которой можно создать позднее.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
ViewContainerRef — это место в DOM, куда можно присоединять представления. Внедрите его, чтобы управлять тем, что там отображается.
private vcr = inject(ViewContainerRef);createEmbeddedView
Объедините их: createEmbeddedView создаёт экземпляр TemplateRef внутри ViewContainerRef.
this.vcr.createEmbeddedView(this.tpl());Передача контекста
Вторым аргументом можно передать объект контекста, доступный через переменные let-.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Очистка представлений
ViewContainerRef.clear() удаляет все созданные им представления. Так можно включать и выключать динамическое содержимое.
this.vcr.clear();Пользовательская структурная директива
На этом принципе работают пользовательские структурные директивы. Директива внедряет обе ссылки и условно отображает содержимое.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Реакция на ввод
Сеттер входного параметра директивы управляет созданием и очисткой, поэтому представление появляется или исчезает.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Вставка по индексу
createEmbeddedView принимает индекс, позволяющий управлять порядком вставки среди соседних представлений.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef также может динамически создавать экземпляры компонентов с помощью createComponent — современной замены ComponentFactoryResolver.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Освобождение ресурсов
Представления, созданные императивно, необходимо очищать. Уничтожение компонента-хоста автоматически очищает его ViewContainerRef, но при ручном переключении вызывайте clear().
Быстрая проверка
Проверьте, насколько хорошо Вы понимаете императивное отображение.
Итоги
Вы узнали, что TemplateRef — это ссылка на разметку шаблона, ViewContainerRef — точка вставки в DOM, а createEmbeddedView отображает одно внутри другого. Вместе они служат основой пользовательских структурных директив и динамических компонентов.
Часто задаваемые вопросы
Урок «TemplateRef и ViewContainerRef» бесплатный?
Да — полный текст урока «TemplateRef и ViewContainerRef» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «TemplateRef и ViewContainerRef»?
Динамически отображайте шаблоны Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «TemplateRef и ViewContainerRef»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Проекция содержимого в один слот
- Проекция в несколько слотов с select
- ng-template и ng-container
- TemplateRef и ViewContainerRef