Eine kurze Diskussion über die Implementierungsmethode des dynamischen Ladens von Komponenten in Angular9

Laden Sie Komponenten entsprechend den Bedingungen, um einen flexiblen Komponentenwechsel zu erreichen und die Verwendung einer großen Anzahl von ngIf zu reduzieren. Dies ist auch ein relativ häufiger Vorgang in Winkel. In diesem Artikel teilen wir Ihnen die dynamische Verwendung von Winkelkomponenten mit. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Erstellung von Direktiven

Bevor Sie eine Komponente hinzufügen, müssen Sie zunächst einen Ankerpunkt definieren, um Angular mitzuteilen, wo die Komponente eingefügt werden soll.
Unter src/dynamic-banner/ad.directive.ts

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

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

AdDirective injiziert ViewContainerRef, um Zugriff auf die Containeransicht zu erhalten. Dieser Container ist der Host der dynamisch hinzugefügten Komponenten.
Achten Sie im @Directive-Dekorator auf den Namen des Selektors: ad-host. Dabei handelt es sich um die Direktive, die Sie auf das Element anwenden.

Verwandte Empfehlungen: „angular Tutorial“

Der Kerncode dynamischer Komponenten

HTML, das von dynamischen Komponenten geladen wird

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

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

Dynamic Komponenten ts

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>

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>

ad.component.ts

src/dynamic-banner/ad.component.ts

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

Einheitliche Registrierung von Komponenten

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 { }

Mapping von Komponenten

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}

Renderings

Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die Implementierungsmethode des dynamischen Ladens von Komponenten in Angular9. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!