Angular 14/15如何通过字符串名称动态创建组件？

一、通过字符串名称动态创建组件 #

Angular 13+ 废弃了ComponentFactoryResolver，推荐直接使用ViewContainerRef.createComponent API实现动态组件创建。由于Angular需要组件的Type类型才能实例化，因此需要先维护字符串名称与组件类型的映射表，再基于映射表完成创建：

1. 定义组件映射表 #

将需要动态创建的组件名称与对应Type关联：

import { Type } from '@angular/core';
import { UserProfileComponent } from './user-profile.component';
import { SettingsComponent } from './settings.component';

// 字符串名称 -> 组件Type的映射
const componentMap: Record<string, Type<any>> = {
  'UserProfileComponent': UserProfileComponent,
  'SettingsComponent': SettingsComponent
};

2. 基于ViewContainerRef创建组件 #

通过ViewContainerRef获取容器，结合映射表实现动态创建：

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

@Component({
  selector: 'app-dynamic-host',
  template: `<ng-template #componentHost></ng-template>`
})
export class DynamicHostComponent implements OnInit {
  @ViewChild('componentHost', { read: ViewContainerRef }) 
  private componentHost!: ViewContainerRef;

  // 组件映射表
  private componentMap: Record<string, Type<any>> = {
    'UserProfileComponent': UserProfileComponent,
    'SettingsComponent': SettingsComponent
  };

  ngOnInit(): void {
    // 示例：通过字符串名称创建UserProfileComponent
    this.createComponentByString('UserProfileComponent');
  }

  createComponentByString(componentName: string): void {
    const targetComponentType = this.componentMap[componentName];
    if (!targetComponentType) {
      throw new Error(`未找到名称为${componentName}的组件`);
    }

    // 清空容器（可选，避免重复创建）
    this.componentHost.clear();
    // 创建组件并获取实例引用
    const componentRef = this.componentHost.createComponent(targetComponentType);

    // 传递输入属性（按需）
    componentRef.instance.userInfo = { id: 1, name: 'John Doe' };
    // 监听输出事件（按需）
    componentRef.instance.onSubmit.subscribe(() => {
      console.log('组件提交事件触发');
    });
  }
}

二、泛型/类型创建组件的替代方案 #

ViewContainerRef.createComponent原生支持泛型，完全可以替代原ComponentFactoryResolver接收泛型Type的创建机制，且类型安全性更强：

1. 基础泛型创建方式 #

直接传入组件Type，通过泛型约束获取类型安全的组件实例：

createGenericComponent<T>(componentType: Type<T>) {
  this.componentHost.clear();
  // 泛型参数确保返回的ComponentRef类型与组件匹配
  return this.componentHost.createComponent<T>(componentType);
}

// 使用示例
const profileRef = this.createGenericComponent<UserProfileComponent>(UserProfileComponent);
// 自动获得类型提示，无需手动类型断言
profileRef.instance.userInfo = { id: 2, name: 'Jane Smith' };

2. 类型安全的字符串名称创建进阶 #

如果想要同时支持字符串名称和类型安全，可以通过泛型映射表实现：

// 定义字符串名称与组件类型的强关联映射
type ComponentNameMap = {
  'user-profile': typeof UserProfileComponent,
  'settings': typeof SettingsComponent
};

// 泛型方法：仅允许传入映射表中存在的字符串名称
createComponentByName<K extends keyof ComponentNameMap>(name: K) {
  const componentType = this.componentMap[name];
  if (!componentType) {
    throw new Error(`未找到名称为${name}的组件`);
  }

  this.componentHost.clear();
  // 返回与组件匹配的类型化ComponentRef
  return this.componentHost.createComponent(componentType) as ComponentRef<InstanceType<ComponentNameMap[K]>>;
}

// 使用示例：只能传入映射表中定义的key，且实例自动带类型提示
const settingsRef = this.createComponentByName('settings');
settingsRef.instance.theme = 'dark'; // 类型提示生效

注意事项 #

• Angular 9+ Ivy编译模式下，动态创建的组件无需在模块entryComponents中声明，只要组件已在模块declarations中注册即可。
• 懒加载组件场景：可通过import()动态导入模块，再提取组件类型进行创建，示例：

async createLazyComponent(componentName: string): Promise<void> {
  let componentType: Type<any>;
  switch(componentName) {
    case 'LazyDashboardComponent':
      const lazyModule = await import('./lazy-dashboard/lazy-dashboard.module');
      componentType = lazyModule.LazyDashboardComponent;
      break;
    default:
      throw new Error('组件不存在');
  }
  this.componentHost.clear();
  this.componentHost.createComponent(componentType);
}

内容的提问来源于stack exchange，提问作者Sigcino