Angular 2.x+ 如何动态装载组件

Angular 2.x+ 如何动态装载组件

在 Angular 1.x 中咱们能够使用 $compile 方法编译模板达到动态加载组件的目的，然而在 ng2 中则没有那么简单，下面的例子即为动态加载广告组件的过程。

live demo

首先，在添加组件前，咱们须要定义一个锚点用于标识组件插入的位置，广告 banner 组件使用辅助指令 AdDirective 来标识模板中的有效插入位置。

// src/app/ad.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ad-host]',
})

export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

AdDirective 经过注入 ViewContainerRef 来访问做为被插入组件宿主的节点视图容器。

class ViewContainerRef { 
  createComponent(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]) : ComponentRef<C> { }
}

1. Component 所对应的 ComponentFactory 便是编译后的 Component 版本，全部与 Angular 运行时的实际交互都是经过 ComponentFactory 进行的
2. 若是在 ViewContainerRef 中建立多个 Component／Template 那么 index 表示当前动态组件插入的位置
3. 默认 Injector 是继承的，若是须要提供额外的 Provider，则须要使用 Injector 参数声明注入器（IoC 容器）
4. projectableNodes 参数表示组件的 Transclude

ng-template 就是应用 AdDirective 组件的地方，用来告诉 Angular 动态组件加载到哪里。

// src/app/ad-banner.component.ts (template)
template: `
            <div class="ad-banner">
              <h3>Advertisements</h3>
              <ng-template ad-host></ng-template>
            </div>
          `

ng-template 是建立动态组件较好的选择，由于它不会渲染多余的输出。

AdBannerComponent 使用 AdItem 对象的数组做为输入属性，并经过 getAds 方法周期性地遍历 AdItem 对象数组，每隔 3s 调用 loadComponent 方法动态加载组件。

export class AdBannerComponent implements AfterViewInit, OnDestroy {
  @Input() ads: AdItem[];
  currentAddIndex: number = -1;
  @ViewChild(AdDirective) adHost: AdDirective;
  subscription: any;
  interval: any;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterViewInit() {
    this.loadComponent();
    this.getAds();
  }

  ngOnDestroy() {
    clearInterval(this.interval);
  }

  loadComponent() { ... }

  getAds() {
    this.interval = setInterval(() => {
      this.loadComponent();
    }, 3000);
  }
}

loadComponent 选择某个广告对象后，使用 ComponentFactoryResolver API 为每一个相应的组件解析出一个 ComponentFactory 工厂类，用于建立组件的实例。

let adItem = this.ads[this.currentAddIndex];
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);

这里须要注意的是， ViewContainerRef 只能经过在构造函数中直接声明来注入，由于 ViewContainerRef 的注入并不经过注入器，而是由编译器直接注入的，因此没法经过 Service 注入。

let viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();

咱们能够调用 viewContainerRef 的 createComponent 方法实例化组件，该方法返回被加载的动态组件的引用，咱们能够经过该引用修改组件的属性或者调用其方法。

let componentRef = viewContainerRef.createComponent(componentFactory);
(<AdComponent>componentRef.instance).data = adItem.data;

同时这里存在一个容易误解的地方就是：建立动态组件必须经过 ViewContainerRef，实际上并非， ComponentFactory 自己就具备实例化组件的能力。

class ComponentFactory {
  create(injector: Injector, projectableNodes?: any[][], rootSelectorOrNode?: string|any) : ComponentRef<C> { }
}