Привет Хабр. На связи Даня, Angular-разработчик из команды Т-Бизнеса.

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

Добро пожаловать под кат!

Для чего оно нужно

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

Второй фактор, производный от первого, — из-за того, что фреймворк содержит множество сущностей, он становится тяжеловесным и лучшим его применением является разработка сложных систем с большим количеством логики и страниц.

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

Один из вариантов оптимизации — сокращение объема изначально загружаемого кода, а также сокращение количества сущностей при изначальном рендере приложения. В этом нам помогут динамические компоненты. Суть оптимизации заключается в том, что компоненты создаются в уже скомпилированном и отрендеренном приложении, не перегружая браузер во время выполнения стартовых сложных задач.

У меня есть статья, в которой подробно описаны шаги создания динамических компонентов и дальнейшее взаимодействие с ними:

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

Создаем первый динамический компонент

За примерами далеко ходить не нужно, возьмем базовый интернет-магазин или онлайн-витрину, где большую часть экрана занимают однотипные блоки с карточками товаров.

Карточки товаров одинаковые по структуре и являются одним и тем же компонентом.

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

Процесс по созданию динамического компонента: нам нужен компонент, который мы собираемся создавать.

Представим, что у нас в приложении есть такая сущность, как финансовые транзакции, которые описывают, сколько и зачем денег было отправлено или получено.

У каждой транзакции есть своя категория, которая описывает суть транзакции. Категорий может быть много, их можно создавать и редактировать. Именно такой компонент, который содержит информацию об определенной категории, мы и будем создавать.

Вот файловая структура нашего проекта

Код компонента category.component.ts:

category.component.ts
@Component({
  selector: 'app-category',
  templateUrl: './category.component.html',
  styleUrls: ['./category.component.scss'],
  standalone: true,
})
export class CategoryComponent {
  @Input() categoryName!: string;
  id!: number;
 
  author!: string;
 
  updatedDate!: string;
}

Начнем с простого варианта, где есть несколько полей, которые через интерполяцию отображаются в шаблоне.

Основой для создания компонента является класс ViewContainerRef, который содержит множество полезных методов, в том числе интересующий нас createComponent.

Можно инжектировать его в компонент, внутри которого будут создаваться динамические компоненты, создать шаблонную переменную и использовать ее как контейнер. Но лучше вынести это в отдельную директиву:

dynamic-components-loader.directive.ts
@Directive({
  selector: '[dynamicComponentLoader]',
})
export class DynamicComponentsLoaderDirective {
  viewContainerRef = inject(ViewContainerRef);

}

Созданную директиву используем с элементом, внутри которого мы хотим создавать компоненты.

categories.component.html:

<div class="dynamic">
    <ng-template dynamicComponentLoader></ng-template>
</div>

А внутри самого компонента контейнера через декоратор @ViewChild получаем доступ к нашей директиве.

categories.component.ts
  @ViewChild(DynamicComponentsLoaderDirective, { static: true })
  dynamicComponentContainer!: DynamicComponentsLoaderDirective;

Итак, базовые вещи сделаны, теперь давайте создавать сами компоненты. Код функции для создания компонента:

categories.component.ts
  async loadSingleCategory() {
    const vcr = this.dynamicComponentContainer.viewContainerRef;
    vcr.clear();
 
    const { CategoryComponent } = await import(
      '../../shared/components/category/category.component'
    );
 
    const categoryComp: ComponentRef<CategoryDynamicComponent> =
      vcr.createComponent<CategoryDynamicComponent>(CategoryComponent);
  }

Получаем доступ к классу ViewContainerRef, который инжектирован в нашу директиву, и записываем его в переменную vcr, далее будем называть ее контейнером:

const vcr = this.dynamicComponentContainer.viewContainerRef;

Чистим все содержимое контейнера при помощи метода clear, ведь автоматически он этого не сделает и при каждом вызове функции к уже существующим будет добавляться новый динамический компонент:

vcr.clear();

После того как мы подготовили контейнер, необходимо загрузить сам компонент, который будем создавать. Сделаем это через функцию import, она асинхронная, поэтому объявим функцию loadSingleCategory через async:

const { CategoryComponent } = await import(
      '../../shared/components/category/category.component'
    );

Теперь можно создавать компонент. Вызываем у контейнера метод createComponent, куда параметром передаем наш компонент:

const categoryComp: ComponentRef<CategoryDynamicComponent> =
      vcr.createComponent<CategoryDynamicComponent>(CategoryComponent);

Взаимодействие с созданным компонентом

У нас есть динамически созданный компонент, который уже отображается на странице и с которым мы можем взаимодействовать.

При создании компонента мы можем получить доступ к его полям и проинициализировать их с помощью объекта categoryData:

const categoryData = {
  categoryName: 'New Name',
  id: 1,
  author: 'Daniel',
  updatedDate: '11.08.2001',
  isRedact: false,
};
 
categories.component.ts
async loadSingleCategory() {
    const vcr = this.dynamicComponentContainer.viewContainerRef;
    vcr.clear();
 
    const { CategoryComponent } = await import(
      '../../shared/components/category/category.component'
    );
 
    const categoryComp: ComponentRef<CategoryDynamicComponent> =
      vcr.createComponent<CategoryDynamicComponent>(CategoryComponent);
 
	// Обращаемся к полям
    categoryComp.instance.categoryName = categoryData.categoryName;
    categoryComp.instance.id = categoryData.id;
    categoryComp.instance.isRedact = false;
    categoryComp.instance.updatedDate = categoryData.updatedDate;
    categoryComp.instance.author = categoryData.author;
  }

После инициализации компонента так изменить его данные уже не получится. К примеру, создадим отдельную функцию, которая будет менять название категории, и будем вызывать ее при клике на кнопку:

categories.component.ts
  changeName() {
    this.categoryComp.instance.categoryName = 'custom';
  }

Для отслеживания процесса добавим хук ngOnChanges в динамический компонент, ведь именно он вызывается при изменении @Input свойств. А еще добавим в хук OnInit вывод в консоль, чтобы знать, когда создается компонент:

category.component.ts
  ngOnInit(): void {
    console.log('OnInit');
  }
 
  ngOnChanges(changes: SimpleChanges) {
    console.log(changes, 'OnChanges');
  }

Если поменять поля компонента извне, то изменения никак не отобразятся, так как не будет запущен цикл обнаружения изменений. Наши изменения будут проигнорированы и отобразятся только на следующем шаге обнаружения изменений.

Есть уже встроенный метод для работы с Input-свойствами таких компонентов, он называется setInput. Метод setInput принимает в себя два параметра: название свойства и его значение.

Доработаем код функции changeName:

categories.component.ts
  changeName() {
    this.categoryComp.setInput('categoryName', 'custom');
  }

Видим, что в консоли выводится сообщение от onInit, помимо него срабатывает onChanges — и мы получаем доступ к объекту changes. Это может понадобиться для выполнения дополнительной логики, связанной с изменениями Input-значений, например повторной инициализации формы, где это значение используется.

Что касается обработки исходящих событий из компонента, то тут выбора не так много, поскольку встроенных механизмов для этого нет и придется пользоваться базовым eventEmitter.

Добавим компоненту категории возможность редактировать его название и сделаем этот процесс в духе глупых компонентов. То есть при редактировании и нажатии кнопки «Сохранить» компонент категории будет отправлять данные в родительский компонент, который в свою очередь будет общаться с сервером. Добавим Output-свойство компоненту категории:

category.component.ts
  @Output() redactCategory: EventEmitter<any> =
    new EventEmitter<any>();
 
И саму функцию для эмита значений
category.component.ts
  sendRedactedCategoryData() {
    this.redactCategory.emit({
      newTitle: this.categoryFormControl.value,
      id: this.id,
    });
  }

А в родительском компоненте внутри функции loadSingleCategory добавим логику подписки на исходящие из компонента категории события

categories.component.ts:

this.categoryComp.instance.redactCategory.subscribe(
      (redactedCategoryData) => {
        // логика по обработке данных тут
      }
    );

Теперь у нас есть рабочий код, который может создавать динамический компонент, а также полноценно взаимодействовать с ним, передавая ему данные и получая обратно события.

Еще больше компонентов

Обычно однотипных компонентов у нас на странице много, и рендерить их по одному за раз — как-то не очень. Более того, с каждым из них нужно как-то взаимодействовать, передавать им данные и прослушивать события.

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

После создания и наполнения компонента данными мы добавляем его в массив со всеми остальными динамическими компонентами. Подписываемся на события редактирования, которые эмитит компонент категории. А чтобы понимать, какой конкретно компонент пробросил событие, будем передавать его id и выполнять поиск по массиву динамических компонентов:

categories.component.ts
  async loadCategories(categoriesData: any[]) {
    const vcr = this.dynamicComponentContainer.viewContainerRef;
    vcr.clear();
 
    const { CategoryComponent } = await import(
      '../../shared/components/category/category.component'
    );
 
    // Проходимся по данным
         categoriesData.forEach((categoryData) => {
      // Создаем компонент и наполняем его данными
      const categoryComp: ComponentRef<CategoryDynamicComponent> =
        vcr.createComponent<CategoryDynamicComponent>(CategoryComponent);
 
      categoryComp.instance.categoryName = categoryData.title;
      categoryComp.instance.id = categoryData.id;
      categoryComp.instance.isRedact = false;
      categoryComp.instance.updatedDate = categoryData.updatedAt;
      categoryComp.instance.author = categoryData.user.email;
 
      // Добавляем новый компонент в массив с уже созданными
      this.categoryComponents.push(categoryComp);
 
      // Подписываемся на события и обрабатываем их
      categoryComp?.instance.redactCategory.subscribe(
        ({ newTitle, id }: RedactCategory) => {
          const redactedCategory = this.categoryComponents.find(
            (category) => category.instance.id === id
          );
 
          if (newTitle !== redactedCategory?.instance.categoryName) {
            this.store.dispatch(
              CategoriesActions.redactCategory({ data: { newTitle, id } })
            );
          }
 
          redactedCategory!.instance.isRedact = false;
        }
      );
    });

    }
  }

Предлагаю перейти на StackBlitz и проверить, как это все работает.

Я слегка упростил структуру проекта, чтобы лишние детали не отвлекали вас от экспериментов.

Итоги

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

Стоит сказать о том, что в Angular уже из коробки присутствует директива ngComponentOutlet, которая может решать задачу динамического рендеринга компонентов гораздо проще и быстрее. Однако, используя ngComponentOutlet, мы теряем возможность общаться с создаваемыми компонентами через @Input - и - @Output свойства. Выходом может стать использование общего сервиса, но это уже не слишком ложится в парадигму умных и глупых компонентов. 

Если же столь гибкого взаимодействия с динамическими компонентами не требуется, рекомендую посмотреть в сторону библиотеки ng-polymorpheus: она решает те же самые задачи, но в более декларативном стиле. Вот ссылка на репозиторий:

Чем больше разработчики ориентируются на результат, тем большим количеством сложных концепций обрастает код. Я надеюсь, что после прочтения статьи одна из них стала более понятной и привычной для дальнейшего использования в ваших проектах. А если есть вопросы или желание поделиться своим опытом — добро пожаловать в комментарии!