Eine kurze Diskussion über die Implementierungsmethode des dynamischen Ladens von Komponenten in Angular9-js-Tutorial-php.cn

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

青灯夜游

Freigeben： 2021-03-19 09:45:15

nach vorne

2765 Leute haben es durchsucht

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.

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

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

ad.component.ts

src/dynamic-banner/ad.component.ts

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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}

Nach dem Login kopieren

Renderings

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

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!