Раскрытие гибкости: использование возможностей динамического дочернего загрузчика в Angular

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

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

Чтобы увидеть это в действии, давайте применим то, что мы обсуждали, к предыдущему случаю. Предположим, в структуре нашего проекта есть три компонента: Пользователи, Продукты и Категории. У нас также есть компонент tabs на нашей странице, который одновременно отображает один из этих трех компонентов. Наша цель — изменить отображаемый компонент при нажатии на вкладку.

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

 componentsMap = {
   1: UsersComponent,
   2: ProductsComponent,
   3: CategoriesComponent,
 };

Теперь, если мы скажем `componentsMap[1]`, мы знаем, что это будет ссылка на UsersComponent, так что теперь нет необходимости добавлять условие или переключатель регистра, чтобы сказать `active === 1` или `if(active === 1)`, теперь мы можем просто передать актив объекту и получить к нему динамический доступ, как показано ниже:

export class AppComponent {
 componentsMap = {
   1: UsersComponent,
   2: ProductsComponent,
   3: CategoriesComponent,
 };


 activeTab: '1' | '2' | '3' = '1';


 constructor() {}


 createComponent() {
   console.log(this.componentsMap[this.activeTab]) // UsersComponent class


 }
}

Теперь, когда у нас есть доступ к классу компонента, рендеринг компонента в Angular не так прост, как в React. В Angular мы не можем просто создать экземпляр класса, как в React. Вместо этого нам нужен класс, который имеет доступ к контейнеру, в котором должны отображаться компоненты. Например, если мы хотим отображать эти компоненты в определенном ‹div›, нам нужен доступ к этому ‹div›. > в качестве контейнера и внедрить в него класс с помощью механизмов Angular.

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

@Directive({
 selector: '[appDynamicChildLoader]',
})
export class DynamicChildLoaderDirective implements OnInit {


 @Input('dynamicComponent') component: any;




 constructor(private viewContainerRef : ViewContainerRef) { }


 embedComponent() {
   this.viewContainerRef.clear();
   this.viewContainerRef.createComponent(this.component);
 }


 ngOnInit(): void {
   this.embedComponent();
 }
}

Как видите, мы создали директиву с именем `dynamicChildLoader`. Используя декоратор `@Input`, мы можем указать входной параметр для этой директивы. Этот параметр представляет класс, который мы хотим отправить. Обратите внимание, что в настоящее время класс имеет тип any, но мы можем улучшить его, назначив интерфейс, чтобы все встроенные компоненты имели одинаковую структуру. Тем не менее, он по-прежнему работает без него.

Кроме того, в конструкторе директивы мы внедрили службу ViewContainerRef. Это магия Angular, о которой я упоминал ранее. Этот сервис позволяет нам создать экземпляр экземпляра класса и встроить его в текущий контейнер, используя `createComponent`. Мы также внедрили метод `embedComponent`, который сначала очищает контейнер, чтобы гарантировать, что мы не добавляем дополнительные компоненты, поскольку мы продолжаем. Затем он вызывает метод `createComponent` и передает полученный класс в качестве аргумента, эффективно создавая и внедряя нужный компонент.

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

Добавьте директиву в элемент контейнера:

<div class="tabs-container" 
appDynamicChildLoader 
[dynamicComponent]="componentsMap[activeTab]" >
</div>

Как показано выше, в ‹div›, куда мы собираемся встроить наши динамические компоненты, мы просто включаем `appDynamicChildLoader` и передайте нужный класс компонента в качестве параметра.

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

Чтобы отобразить другие компоненты, мы можем просто обновить значение свойства activeTab. Как упоминалось ранее, для этого свойства можно задать значение 1, 2 или 3. для правильной ссылки на соответствующие компоненты.

Например, если мы хотим изменить его на 2, контейнер сначала очистит свое содержимое, а затем встроит. новый компонент в него. Это позволяет нам динамически переключаться между различными компонентами путем обновления свойства activeTab.

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

И снова мы можем использовать возможности Angular для решения этой проблемы. Как было показано ранее, когда мы используем метод `createComponent ` для встраивания нужного компонента в наш контейнер, он фактически возвращает экземпляр компонента, который мы только что создали. Это означает, что теперь у нас есть прямой доступ к экземпляру из файла TypeScript, а не из шаблона HTML.

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

Для этого нам нужно внести несколько изменений в структуру наших компонентов. Начнем с нашего AppComponent, где мы определили `componentsMap`. В этом компоненте нам нужно изменить `componentsMap`, чтобы он не только содержал класс компонента, но и включал данные, которые мы хотим связать с ним. Как показано ниже:

this.componentsMap = {
     1: {
       data: {
         pageTitle: 'Users',
         onClick: this.onClick,
       },
       component: UsersComponent,
     },
     2: {
       data: {
         pageTitle: 'Products',
         onClick: this.onClick,
       },
       component: ProductsComponent,
     },
     3: {
       data: {
         pageTitle: 'Categories',
         onClick: this.onClick,
       },
       component: CategoriesComponent,
     },
   };

Как видите, вместо того, чтобы назначать свойству только класс компонента, мы изменили его, назначив объект-контейнер. Этот объект-контейнер имеет свойство компонента, которое содержит класс компонента, и свойство данных, которое содержит данные для передачи компоненту.

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

import { ComponentRef, Directive, Input, OnInit, ViewContainerRef } from '@angular/core';


export interface EmbeddedComponent {
 data : any;
}


export interface DynamicComponent {
 data: any;
 component : any & EmbeddedComponent;
}


@Directive({
 selector: '[appDynamicChildLoader]',
})
export class DynamicChildLoaderDirective implements OnInit {


 @Input('dynamicComponent') dynamicComponentContainer: DynamicComponent = {} as DynamicComponent;




 constructor(private viewContainerRef : ViewContainerRef) { }


 embedComponent() {
   this.viewContainerRef.clear();
   const createdComponent : ComponentRef<EmbeddedComponent> =  this.viewContainerRef.createComponent(this.dynamicComponentContainer.component);
   const componentInstance: EmbeddedComponent = createdComponent.instance;
   componentInstance.data = this.dynamicComponentContainer.data;
 }


 ngOnInit(): void {
   this.embedComponent();
 }
}

Как вы можете видеть выше, мы внесли некоторые изменения в нашу директиву, чтобы принимать как компонент, так и свойства данных внутри полученного объекта. Прежде всего, мы добавили два новых интерфейса для представления наших ожиданий и взаимодействий. Первый интерфейс представляет встроенный компонент, который является фактическим классом компонента, который мы будем визуализировать. Теперь мы гарантируем, что все отображаемые компоненты имеют свойство данных. Другой интерфейс представляет полученный объект, переданный из нашего компонента приложения. Как видите, оно включает свойство data с типом «любой» или «неизвестный», так как мы не знаем структуру данных, которые хотим отправить на данный момент. Однако вы можете улучшить это, взяв за основу структуры данных вашего компонента.

export class ProductsComponent implements OnInit, EmbeddedComponent {
 data: any = {};
 pageTitle = '';
 onClick = () => {};


 ngOnInit(): void {
   this.pageTitle = this.data['pageTitle'];
   this.onClick = this.data['onClick'];
 }
}