如何通过字符串查找Angular组件Type，实现拖拽应用配置持久化？

这个问题我之前在做动态组件持久化的时候也遇到过，Angular确实没有直接提供通过字符串查找组件Type的API——毕竟TypeScript编译后类型信息会被擦除，没法直接反射。不过我们可以通过几种实用的方式来实现需求：

1. 手动维护组件名称-类型映射表 #

这是最直接的方式，适合组件数量不多的场景：

首先定义一个映射对象，把所有需要动态加载的widget组件名称和对应的Type关联起来：

// 可以放在单独的文件里，比如widgets-map.ts
import { Type } from '@angular/core';
import { ButtonComponent } from './widgets/button.component';
import { InputComponent } from './widgets/input.component';

export const WidgetComponentMap: { [key: string]: Type<any> } = {
  'ButtonComponent': ButtonComponent,
  'InputComponent': InputComponent,
  // 把你所有的widget组件都添加到这里
};

然后在宿主组件中，通过名称从映射表中获取Type，再创建组件工厂：

import { WidgetComponentMap } from './widgets-map';

// ...

loadWidget(componentName: string) {
  const componentType = WidgetComponentMap[componentName];
  if (!componentType) {
    console.error(`找不到名为${componentName}的组件`);
    return;
  }
  
  const factory = this.resolver.resolveComponentFactory(componentType);
  // 后续创建并挂载组件的逻辑...
}

2. 利用Angular依赖注入系统注册组件Type #

如果希望更贴合Angular的DI风格，可以把组件Type作为服务注册，然后通过Injector获取：

首先在你的widget模块中，把每个组件Type注册为provider：

import { NgModule } from '@angular/core';
import { ButtonComponent } from './button.component';
import { InputComponent } from './input.component';

@NgModule({
  declarations: [ButtonComponent, InputComponent],
  entryComponents: [ButtonComponent, InputComponent], // Angular 9+ Ivy模式下可省略，但兼容旧版建议保留
  providers: [
    { provide: 'ButtonComponent', useValue: ButtonComponent },
    { provide: 'InputComponent', useValue: InputComponent },
    // 每个组件都按此格式注册
  ]
})
export class WidgetsModule { }

然后在宿主组件中注入Injector，通过组件名称作为token获取Type：

import { Injector } from '@angular/core';

// ...

constructor(
  private injector: Injector,
  private resolver: ComponentFactoryResolver
) {}

loadWidget(componentName: string) {
  try {
    const componentType = this.injector.get<Type<any>>(componentName);
    const factory = this.resolver.resolveComponentFactory(componentType);
    // 后续组件创建逻辑...
  } catch (error) {
    console.error(`组件${componentName}未注册`, error);
  }
}

3. 封装一个Widget注册服务（推荐） #

如果你的widget组件数量较多，或者需要动态注册组件，封装一个专门的注册服务会更灵活：

首先创建一个全局服务来管理组件的注册和查找：

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

@Injectable({ providedIn: 'root' })
export class WidgetRegistry {
  private widgetMap = new Map<string, Type<any>>();

  // 注册widget组件
  registerWidget(name: string, component: Type<any>) {
    this.widgetMap.set(name, component);
  }

  // 通过名称获取组件Type
  getWidgetType(name: string): Type<any> | undefined {
    return this.widgetMap.get(name);
  }
}

然后在模块初始化时批量注册组件（或者在组件自身的初始化逻辑中注册）：

import { NgModule } from '@angular/core';
import { WidgetRegistry } from './widget-registry.service';
import { ButtonComponent } from './button.component';
import { InputComponent } from './input.component';

@NgModule({
  declarations: [ButtonComponent, InputComponent],
  entryComponents: [ButtonComponent, InputComponent]
})
export class WidgetsModule {
  constructor(private registry: WidgetRegistry) {
    // 批量注册所有widget
    this.registry.registerWidget('ButtonComponent', ButtonComponent);
    this.registry.registerWidget('InputComponent', InputComponent);
  }
}

最后在宿主组件中使用这个服务来获取组件Type：

import { WidgetRegistry } from './widget-registry.service';

// ...

constructor(
  private registry: WidgetRegistry,
  private resolver: ComponentFactoryResolver
) {}

loadWidget(componentName: string) {
  const componentType = this.registry.getWidgetType(componentName);
  if (!componentType) {
    console.error(`Widget ${componentName}未注册`);
    return;
  }
  
  const factory = this.resolver.resolveComponentFactory(componentType);
  // 创建并挂载组件...
}

注意事项 #

• 不管用哪种方式，动态组件都需要在entryComponents中声明（Angular 9+启用Ivy编译器后可以省略，但如果要兼容旧版本或非Ivy环境，建议保留）。
• 持久化JSON时，只需要保存组件名称字符串，加载时通过上述方法还原对应的Type即可。

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