如何通过ViewContainerRef基于组件名数组动态创建Angular组件？

在Angular中，ViewContainerRef.createComponent() 方法需要接收组件类的类型（Type<any>），而非字符串形式的组件名，因此你需要先建立字符串与组件类的映射关系，再通过映射获取对应组件类来完成动态创建。以下是具体实现步骤：

步骤1：创建组件名与组件类的映射对象 #

先导入所有需要动态创建的组件，再定义映射对象关联字符串组件名与实际组件类：

// 导入目标组件
import { PageOneComponent } from './page-one.component';
import { PageTwoComponent } from './page-two.component';
import { PageThreeComponent } from './page-three.component';
import { PageFourComponent } from './page-four.component';

// 建立组件名与组件类的映射
private componentMap: { [key: string]: Type<any> } = {
  'PageOneComponent': PageOneComponent,
  'PageTwoComponent': PageTwoComponent,
  'PageThreeComponent': PageThreeComponent,
  'PageFourComponent': PageFourComponent
};

步骤2：遍历数组动态创建组件 #

通过注入的ViewContainerRef实例，遍历组件名数组并创建组件：

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

constructor(private viewContainerRef: ViewContainerRef) {}

createComponents() {
  // 可选：清空容器内已有组件
  this.viewContainerRef.clear();

  this.componentArray.forEach(componentName => {
    const componentClass = this.componentMap[componentName];
    if (componentClass) {
      // 创建组件实例
      const componentRef = this.viewContainerRef.createComponent(componentClass);
      
      // 可选：给组件实例传递数据
      // componentRef.instance.someProperty = '自定义数据';
    } else {
      console.warn(`未找到名为${componentName}的组件`);
    }
  });
}

版本兼容与注意事项 #

• Angular 12及以下版本：需要通过ComponentFactoryResolver先获取组件工厂，再创建组件：

  import { ComponentFactoryResolver } from '@angular/core';
  
  constructor(
    private viewContainerRef: ViewContainerRef,
    private resolver: ComponentFactoryResolver
  ) {}
  
  createComponents() {
    this.viewContainerRef.clear();
    this.componentArray.forEach(componentName => {
      const componentClass = this.componentMap[componentName];
      if (componentClass) {
        const factory = this.resolver.resolveComponentFactory(componentClass);
        this.viewContainerRef.createComponent(factory);
      }
    });
  }
  

• 组件声明要求：动态创建的组件需在所属模块的declarations数组中声明；Angular 9之前版本还需加入entryComponents数组；若使用独立组件（standalone: true），则无需在模块中声明，直接导入即可。

内容的提问来源于stack exchange，提问作者L. Kvri