angular9中如何實現組件動態加載

這篇文章將為大家詳細講解有關angular9中如何實現組件動態加載，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

指令的創建

在添加組件之前，先要定義一個錨點來告訴 Angular 要把組件插入到什么地方。
在src/dynamic-banner/ad.directive.ts下

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

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

AdDirective 注入了 ViewContainerRef 來獲取對容器視圖的訪問權，這個容器就是那些動態加入的組件的宿主。
在 @Directive 裝飾器中，要注意選擇器的名稱：ad-host，它就是你將應用到元素上的指令。

相關推薦：《angular教程》

動態組件的核心代碼

動態組件加載的html

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

<div class="ad-banner-example">
  <h4>Advertisements</h4>
  <ng-template ad-host></ng-template>
</div>

動態組件的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;
  }
}

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

ad.component.ts

src/dynamic-banner/ad.component.ts

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

組件統一注冊

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

組件的映射

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}

效果圖

關于“angular9中如何實現組件動態加載”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。