Динамический рендеринг Angular-компонентов

Привет Хабр. На связи Даня, 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: она решает те же самые задачи, но в более декларативном стиле. Вот ссылка на репозиторий:

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