浅谈angular9中组件动态加载的实现方法

<div class="ad-banner-example">

  <h3>Advertisements</h3>

  <ng-template ad-host></ng-template>

</div>

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;

  }

}

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

export class AdItem {

  constructor(public component: Type<any>, public data: any) {}

}

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

export interface AdComponent {

  data: any;

}

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

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}