Динамические компоненты

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

Что такое динамические компоненты?

Динамические компоненты загружаются в представление во время выполнения, а не объявляются непосредственно в шаблоне.

Зачем использовать динамические компоненты?

• Гибкое отображение пользовательского интерфейса
• Условное отображение компонентов
• Создание динамических панелей управления или модальных окон

Создание заполнителя

Используйте <ng-container> как заполнитель для загрузки динамических компонентов:

<ng-container #dynamicContainer></ng-container>

Использование ViewChild

Получите доступ к контейнеру с помощью @ViewChild в классе компонента:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Динамическая загрузка компонентов

Используйте механизм создания компонентов, чтобы создавать и вставлять компоненты:

const componentRef = this.container.createComponent(MyDynamicComponent);

Передача данных динамическим компонентам

Передавайте данные динамически созданному компоненту с помощью входных свойств:

componentRef.instance.data = 'Hello Dynamic';

Удаление динамических компонентов

Вы можете легко удалять динамические компоненты из DOM:

this.container.clear();

Итоги

Теперь Вы умеете динамически создавать, настраивать и удалять компоненты в Angular. Отличная работа!