Angular 4中如何通过类名解析组件？

你遇到的这个问题我之前也碰到过——Angular 4对组件工厂的内部实现做了调整，直接访问_factories这个私有属性会触发错误，毕竟Angular团队从4.x开始收紧了对内部未公开API的访问限制，之前Angular 2的那套写法自然就失效了。

为啥Angular 2的方法在Angular 4里行不通？ #

在Angular 2中，ComponentFactoryResolver的_factories是个可以直接操作的私有对象，但到了Angular 4及以后版本，这个内部结构被重构了，直接访问不仅会触发类型检查报错，运行时也可能抛出异常，因为框架不再允许开发者直接操作这些非公开的内部属性。

给你两个Angular 4+通用的可行方案 #

要实现通过组件名称字符串动态创建组件，核心是确保组件被正确注册到模块的entryComponents，然后用安全的方式获取组件类型，下面是两种靠谱的做法：

方案1：手动维护组件名称-类型映射表（最稳定）

这种方法完全不依赖内部API，兼容性和稳定性拉满：

1. 先把需要动态创建的组件加到模块的entryComponents数组里：

@NgModule({
  declarations: [UserProfileComponent, ProductCardComponent],
  entryComponents: [UserProfileComponent, ProductCardComponent]
})
export class AppModule {}

2. 创建一个映射对象，把组件名称字符串和对应的组件类型绑定：

import { UserProfileComponent, ProductCardComponent } from './components';

const componentNameMap: {[key: string]: Type<any>} = {
  'UserProfileComponent': UserProfileComponent,
  'ProductCardComponent': ProductCardComponent
};

3. 在你的组件里通过映射表拿到组件类型，再创建实例：

constructor(
  private resolver: ComponentFactoryResolver, 
  private vcRef: ViewContainerRef
) {}

createDynamicComponent(compName: string) {
  const targetComponentType = componentNameMap[compName];
  if (!targetComponentType) {
    throw new Error(`找不到名为${compName}的组件，请检查映射表`);
  }
  const componentFactory = this.resolver.resolveComponentFactory(targetComponentType);
  const componentRef = this.vcRef.createComponent(componentFactory);
  // 这里可以给动态组件设置输入属性
  // componentRef.instance.userId = 123;
}

方案2：通过模块工厂获取组件工厂（适合不想手动维护映射表的场景）

如果你嫌手动维护映射表麻烦，可以通过模块的组件工厂解析器来获取所有注册的组件，但注意这种方法还是用到了内部属性，长期来看不如方案1稳定：

constructor(
  private injector: Injector,
  private vcRef: ViewContainerRef
) {}

async createComponentByName(compName: string) {
  // 加载目标模块（替换成你的模块路径和名称）
  const moduleRef = await this.injector.get(NgModuleFactoryLoader).load('./app/app.module#AppModule');
  const resolver = moduleRef.componentFactoryResolver;
  // 注意：Angular 4中_factories可能是Map类型，需要转成数组
  const allComponentTypes = resolver['_factories'] ? Array.from(resolver['_factories'].keys()) : [];
  const targetComponentType = allComponentTypes.find(type => type.name === compName);
  
  if (targetComponentType) {
    const factory = resolver.resolveComponentFactory(targetComponentType);
    const compRef = this.vcRef.createComponent(factory);
  } else {
    console.error(`组件${compName}未注册到模块的entryComponents中`);
  }
}

必须注意的关键点 #

• 所有要动态创建的组件必须添加到模块的entryComponents数组，否则Angular不会为它们生成组件工厂，自然无法动态创建。
• 尽量避免直接访问Angular的私有API（比如_factories），这些没有官方支持的内部属性，版本一升级就可能失效，到时候又要改代码。

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