[Anglar]-使用ComponentFactoryResolver动态产生Component

      Angular提供了ComponentFactoryResolver,来协助我们在项目中动态实现Component,而不是把页面需要的所有的组件都写道view里，根据不同的条件来判断显示目标component，当遇到程序现实复杂的需求时非常好用，写出的代码易理解也易维护。今天我们就来看看如何透过ComponentFactoryResolver来动态产生需要的Component。

需求说明

　　首先看看以下画面，我们希望点选radio时，可以依照不同的选择切换不同的Component。

　　

　　先不考虑动态产生，只有3个component时，代码可以很简单通过ngIf来判断component是否要被产生，可读性也不至于太差。

<input type="radio" id="showComponentA" name="showComponent" value="componentA" [(ngModel)]="selectedComponentName"/>
<label for="showComponentA">组件 A</label>

<input type="radio" id="showComponentB" name="showComponent" value="componentB" [(ngModel)]="selectedComponentName"/>
<label for="showComponentB">组件 B</label>

<input type="radio" id="showComponentC" name="showComponent" value="componentC" [(ngModel)]="selectedComponentName"/>
<label for="showComponentC">组件 C</label>

<app-component-a *ngIf="selectedComponentName === 'componentA'"></app-component-a>
<app-component-b *ngIf="selectedComponentName === 'componentB'"></app-component-b>
<app-component-c *ngIf="selectedComponentName === 'componentC'"></app-component-c>

　　不过当选想变得很多，或者可选项通过后端决定等等较为复杂的情况时，代码很容易变得杂乱不好维护。身为优秀的程序员，自然不希望这种情况发生，因此我们需要通过动态的方式，来产生component。也就是今天的主角--ComponentFactoryResolver。

建立DynamicComponentDirective

　　首先我们先建立一个directive,并注入ViewContainerRef，ViewContainerRef可以让我们知道目前所在的HTML元素包含的view内容,也可以通过它来改变view的结果（例如：动态的产生component,或者动态的移除component等等）。

　　执行命令： ng generate directive DynamicComponent

　　

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

@Directive({
  selector: '[appDynamicComponent]'
})
export class DynamicComponentDirective {

  constructor(public viewcontainerRef: ViewContainerRef) { }

}

　　接着我们需要套用这个directive到需要动态产生component的容器上，我们可以简单地套用ng-template就好，把原来的view代码改成如下

<input type="radio" id="showComponentA" name="showComponent" value="componentA" (change)="displayComponent('componentA')"/>
<label for="showComponentA">组件 A</label>

<input type="radio" id="showComponentB" name="showComponent" value="componentB" (change)="displayComponent('componentB')"/>
<label for="showComponentB">组件 B</label>

<input type="radio" id="showComponentC" name="showComponent" value="componentC" (change)="displayComponent('componentC')"/>
<label for="showComponentC">组件 C</label>

<ng-template appDynamicComponent></ng-template>

　　原来的3行components就浓缩成只剩下一行了，同时我们也不用看到一堆脏脏的ngIf了，view的呈现顿时清爽可许多；同时我们替radiobox加入change事件，要决定动态产生哪一个component，而接下来就是动态产生的重头戏。

使用ComponentFactoryResolver动态产生Component

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponentDirective } from './dynamic-component.directive';
import { DynamicComponentService } from './dynamic-component.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DynamicComponentService]
})
export class AppComponent {
  @ViewChild(DynamicComponentDirective) componentHost: DynamicComponentDirective;
  constructor(private dynamicComponentService: DynamicComponentService,
              private componentFactoryResolver: ComponentFactoryResolver) {
  }
  displayComponent(componentName: string) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      this.dynamicComponentService.getComponent(componentName)
    );
    const viewContainerRef = this.componentHost.viewcontainerRef;
    viewContainerRef.clear();
    viewContainerRef.createComponent(componentFactory);
  }
}

　　在这边我们做了这样几件事：

　　1.使用ViewChild取得要动态创建component的directive（componentHost）

　　2.注入ComponentFactoryResolver

　　3.在displayComponent中，使用ComponentFactoryResolver.ResolveComponentFactory来创建一个ComponentFactory

　　4.通过componentHost的ViewContainerRef,将内容清空（viewcontainerRef.clear()）

　　5.通过viewcontainerRef.creatComponent(componentFactory),产生我们需要的component并放入componetHost之中

　　至于 如何产生哪一个component，这里我们额外建立了一个DynamicComponentService服务，来决定产生哪一个component

　　执行命令： ng generate service DynamicComponent

import { Injectable } from '@angular/core';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';
import { ComponentCComponent } from './component-c/component-c.component';

@Injectable({
  providedIn: 'root'
})
export class DynamicComponentService {
  private components = {
    componentA: ComponentAComponent,
    componentB: ComponentBComponent,
    componentC: ComponentCComponent
  };
  constructor() { }

  getComponent(componentName: string) {
    return this.components[componentName];
  }
}

在Module加入entryComponents

接下来就是最后一步了，由于我们的Component是动态产生，而不是直接透过View上的selector产生的，为了确保能够产生动态的Component，我们还需要在所属的Module中加入一个entryComponents阵列

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ComponentAComponent } from './component-a/component-a.component';
import { ComponentBComponent } from './component-b/component-b.component';
import { ComponentCComponent } from './component-c/component-c.component';
import { DynamicComponentDirective } from './dynamic-component.directive';

@NgModule({
  declarations: [
    AppComponent,
    ComponentAComponent,
    ComponentBComponent,
    ComponentCComponent,
    DynamicComponentDirective
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    ComponentAComponent,
    ComponentBComponent,
    ComponentCComponent
  ]
})
export class AppModule { }

 完整代码地址：https://github.com/1weidong/component-factory-resolver/tree/master

 

基于vue3最新标准，实现后台前端综合解决方案 + 前端技术书籍 原价368， 限时39.9

qq649149488