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

Динамические компоненты в любой среде / библиотеке упрощают создание крупномасштабных приложений. Angular обеспечивает динамическую загрузку компонентов.

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

В этой части мы рассмотрим, как создавать динамические компоненты в angular 7.

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

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

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

Вместо этого вам нужен способ загрузить новый компонент без фиксированной ссылки на компонент в шаблоне рекламного баннера.

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

Якорная директива

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

В рекламном баннере используется вспомогательная директива AdDirective. отметить допустимые точки вставки в шаблоне.

Код TypeScript:

import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
  selector: '[ad-host]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

Демонстрация в реальном времени:

См. Pen DynamicComponentsDirective.ts от w3resource ( @ w3resource ) в CodePen .

AdDirective внедряет ViewContainerRef, чтобы получить доступ к контейнеру представления элемента, в котором будет размещен динамически добавленный компонент.

В декораторе @Directive обратите внимание на имя селектора ad-host; это то, что вы используете, чтобы применить директиву к элементу

Загрузка компонентов

Большая часть реализации рекламного баннера находится в ad-banner.component.ts. Для простоты в этом примере HTML-код находится в свойстве шаблона @Component в качестве строки шаблона.

В элементе <ng-template> вы применяете только что созданную директиву. Чтобы применить AdDirective, отзовите селектор из ad.directive.ts, ad-host. Примените это к <ng-template> без квадратных скобок. Теперь Angular знает, где динамически загружать компоненты.

Элемент <ng-template> является хорошим выбором для динамических компонентов, поскольку он не отображает никаких дополнительных выходных данных.

Разрешающие компоненты

Присмотритесь к методам в ad-banner.component.ts.

AdBannerComponent принимает в качестве входных данных массив объектов AdItem, который в конечном итоге исходит от AdService. Объекты AdItem указывают тип загружаемого компонента и любые данные, которые нужно связать с компонентом. AdService возвращает фактические объявления, составляющие рекламную кампанию.

Передача массива компонентов в AdBannerComponent позволяет создавать динамический список объявлений без статических элементов в шаблоне.

С его методом getAds () AdBannerComponent циклически перебирает массив AdItems и загружает новый компонент каждые 3 секунды, вызывая loadComponent ().

Код TypeScript:

export class AdBannerComponent implements OnInit, OnDestroy {
  @Input() ads: AdItem[];
  currentAdIndex = -1;
  @ViewChild(AdDirective) adHost: AdDirective;
  interval: any;
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }
  ngOnInit() {
    this.loadComponent();
    this.getAds();
  }
  ngOnDestroy() {
    clearInterval(this.interval);
  }
  loadComponent() {
    this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
    let adItem = this.ads[this.currentAdIndex];
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<AdComponent>componentRef.instance).data = adItem.data;
  }
  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

Метод loadComponent () выполняет здесь большую работу. Сделай это шаг за шагом. Во-первых, он выбирает рекламу.

• Как loadComponent () выбирает объявление
• Метод loadComponent () выбирает объявление, используя некоторую математику.

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

После того, как loadComponent () выбирает объявление, оно использует ComponentFactoryResolver для разрешения ComponentFactory для каждого конкретного компонента. Затем ComponentFactory создает экземпляр каждого компонента.

Затем вы нацеливаетесь на viewContainerRef, который существует в этом конкретном экземпляре компонента. Откуда ты знаешь, что это именно тот экземпляр? Поскольку он ссылается на adHost, а adHost - это директива, которую вы установили ранее, чтобы указать Angular, куда вставлять динамические компоненты.

Как вы помните, AdDirective внедряет ViewContainerRef в свой конструктор. Так директива получает доступ к элементу, который вы хотите использовать для размещения динамического компонента.

Чтобы добавить компонент в шаблон, вы вызываете createComponent () для ViewContainerRef.

Метод createComponent () возвращает ссылку на загруженный компонент. Используйте эту ссылку для взаимодействия с компонентом, присваивая его свойствам или вызывая его методы.

Селекторные ссылки

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

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

entryComponents: [ HeroJobAdComponent, HeroProfileComponent ]

Интерфейс AdComponent

В рекламном баннере все компоненты реализуют общий интерфейс AdComponent для стандартизации API для передачи данных компонентам.

Вот два примера компонентов и интерфейс AdComponent для справки:

Hero-Job-ad.component.ts

Код TypeScript:

import { Component, Input } from '@angular/core';
import { AdComponent }      from './ad.component';
@Component({
  template: `
    <div class="job-ad">
      <h4>{{data.headline}}</h4>
      {{data.body}}
    </div>
  `
})
export class HeroJobAdComponent implements AdComponent {
  @Input() data: any;
}

Демонстрация в реальном времени:

См. Перо DynamicComponent_hero-job-ad.component.ts от w3resource ( @ w3resource ) в CodePen .

Hero-profile.component.ts

Код TypeScript:

import { Component, Input }  from '@angular/core';
import { AdComponent }       from './ad.component';
@Component({
  template: `
    <div class="hero-profile">
      <h3>Featured Hero Profile</h3>
      <h4>{{data.name}}</h4>
      <p>{{data.bio}}</p>
      <strong>Hire this hero today!</strong>
    </div>
  `
})
export class HeroProfileComponent implements AdComponent {
  @Input() data: any;
}

Демонстрация в реальном времени:

См. Перо DynamicComponent_hero-profile.component.ts от w3resource ( @ w3resource ) в CodePen .

Adcomponent.ts

Код TypeScript:

import { Component, Input } from '@angular/core';
 import { AdComponent }      from './ad.component';
@Component({
  template: `
    <div class="job-ad">
      <h4>{{data.headline}}</h4>
 
      {{data.body}}
    </div>
  
})
export class HeroJobAdComponent implements AdComponent {
  @Input() data: any;
 
}

Демонстрация в реальном времени:

См. Перо DynamicComponentAdcomponent.ts от w3resource ( @ w3resource ) в CodePen .

Предыдущая: Компонентные стили
Далее: Угловые элементы