Une brève discussion sur la méthode d'implémentation du chargement dynamique des composants dans angulaire9-js tutoriel-php.cn

Une brève discussion sur la méthode d'implémentation du chargement dynamique des composants dans angulaire9

青灯夜游

Libérer： 2021-03-19 09:45:15

avant

2765 Les gens l'ont consulté

Charger les composants en fonction des conditions pour obtenir une commutation flexible des composants et réduire l'utilisation de beaucoup de ngIf. C'est également une opération relativement courante dans angulaire. Dans cet article, nous partagerons avec vous l'utilisation dynamique des composants angulaires. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Une brève discussion sur la méthode d'implémentation du chargement dynamique des composants dans angulaire9

Création de directives

Avant d'ajouter un composant, vous devez d'abord définir un point d'ancrage pour indiquer à Angular où insérer le composant . lieu.
Sous src/dynamic-banner/ad.directive.ts

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

@Directive({
  selector: '[ad-host]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

Copier après la connexion

AdDirective injecte ViewContainerRef pour accéder à la vue du conteneur. Ce conteneur est l'hôte des composants ajoutés dynamiquement.
Dans le décorateur @Directive, faites attention au nom du sélecteur : ad-host, qui est la directive que vous appliquerez à l'élément.

Recommandations associées : "Tutoriel angulaire"

Code de base des composants dynamiques

HTML chargé par les composants dynamiques

src/dynamic-banner/ad-banner.component.html

<div>
  <h3>Advertisements</h3>
  <ng-template></ng-template>
</div>

Copier après la connexion

ts de composants dynamiques

src/dynamic-banner /ad-banner.component.ts

import { Component, Input, OnInit, ViewChild, ComponentFactoryResolver, OnDestroy, SimpleChanges } from '@angular/core';

import { AdDirective } from './ad.directive';
import { AdItem }      from './ad-item';
import { AdComponent } from './ad.component';
import { componentMap } from './component/utils';
@Component({
  selector: 'app-ad-banner',
  templateUrl: './ad-banner.component.html',
  // styleUrls: ['./ad-banner.component.css']
})
export class AdBannerComponent implements OnInit {
  @Input() type: string = 'ad1' // 传入的key,确定加载那个组件
  @Input() data: any = {} // 传入组件的数据
  @ViewChild(AdDirective, {static: true}) adHost: AdDirective; // 动态组件的指令
  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngOnInit() {
    this.loadComponent();
  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['type']) this.loadComponent()
  }

  loadComponent() {
    // adItem 要加载的组件类，以及绑定到该组件上的任意数据
    const adItem = new AdItem(componentMap[this.type], this.data) 
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
    const viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);
    (<adcomponent>componentRef.instance).data = adItem.data;
  }
}</adcomponent>

Copier après la connexion

ad-item.ts

src/dynamic-banner/ad-item.ts

import { Type } from '@angular/core';

export class AdItem {
  constructor(public component: Type<any>, public data: any) {}
}</any>

Copier après la connexion

ad.component.ts

src/dynamic-banner/ad.component.ts

import { Type } from '@angular/core';
export interface AdComponent {
  data: any;
}

Copier après la connexion

Enregistrement unifié des composants

src/dynamic-banner/share.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { componets } from './component/utils';
import { AdDirective } from './ad.directive';
import { AdBannerComponent } from './ad-banner.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[
    [...componets],
    AdDirective,
    AdBannerComponent,
  ],
  declarations: [
    [...componets],
    AdDirective,
    AdBannerComponent,
  ],
  entryComponents: [
    [...componets]
  ]
})
export class ShareModule { }

Copier après la connexion

Mappage des composants

src/dynamic-banner/component/utils.ts

import { HeroProfileComponent } from "./hero-profile.component";
import { HeroJobAdComponent } from './hero-job-ad.component';
const componentMap = {
    ad1: HeroProfileComponent,
    ad2: HeroJobAdComponent
}
const componets = [
    HeroProfileComponent,
    HeroJobAdComponent
]
export {componets, componentMap}

Copier après la connexion