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

В Angular есть несколько способов создания и использования динамических компонентов. Рассмотрим два наиболее распространенных подхода.

Первый способ - использование директивы ngComponentOutlet. С помощью этой директивы вы можете динамически загружать и отображать компоненты на основе условий или пользовательских событий. Директива ngComponentOutlet принимает в качестве значения ссылку на класс компонента, который необходимо отобразить. Например, если у вас есть компонент DynamicComponent, вы можете использовать следующий код для его динамического отображения:

<ng-container *ngComponentOutlet="DynamicComponent"></ng-container>

При этом DynamicComponent может быть определен в общем модуле или вложенном модуле.

Второй способ - использование сервиса ComponentFactoryResolver. Сервис ComponentFactoryResolver позволяет создавать компоненты динамически и вручную. Сначала вам необходимо получить экземпляр фабрики компонента с помощью метода resolveComponentFactory:

import { Component, ComponentFactoryResolver, ViewChild, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-dynamic',
  template: '<ng-container #container></ng-container>',
})
export class DynamicComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {}

  createDynamicComponent() {
    const factory = this.resolver.resolveComponentFactory(YourDynamicComponent);
    const componentRef = this.container.createComponent(factory);
    // Здесь можно настроить параметры компонента или подписаться на его события

    // Например, для передачи параметров используйте setInput()
    componentRef.instance.inputProperty = 'Some value';

    // Используйте subscribe() для подписки на события компонента
    componentRef.instance.outputEvent.subscribe((result) => {
      // Обработка результата
    });
  }
}

Затем вы можете использовать метод createComponent для создания экземпляра компонента и его добавления в представление. Вы также можете настроить параметры компонента и подписаться на его события.

Оба способа имеют свои особенности, и выбор между ними зависит от ваших потребностей и предпочтений. Директива ngComponentOutlet более проста в использовании и подходит для простых случаев, когда требуется только динамическое отображение компонента. С другой стороны, сервис ComponentFactoryResolver предоставляет больше гибкости и возможностей для настройки и управления динамическими компонентами. Выбор зависит от требований вашего проекта.