Angular技术问询：如何通过组件/类名称访问对应组件/类

我之前在处理组件动态管理的需求时，试过一个简洁实用的TypeScript方案，分享给你：

全局核心代码实现 #

先在项目的全局TypeScript文件中添加以下代码，搭建组件注册的基础框架：

interface Component { }
type ComponentClass = { new (): Component };
const REGISTRY = new Map<string, ComponentClass>();

function getTypeFor(name: string): ComponentClass { 
  return REGISTRY.get(name); 
}

function register(cls: ComponentClass): void { 
  REGISTRY.set(cls.name, cls); 
}

组件注册与使用示例 #

接下来就可以按如下方式定义并注册你的组件：

// 定义组件A并完成注册
class ComponentA implements Component {
  // 这里写组件A的具体业务逻辑
}
register(ComponentA);

// 定义组件B并完成注册
class ComponentB implements Component {
  // 这里写组件B的具体业务逻辑
}
register(ComponentB);

// 后续需要获取组件类并实例化时
const targetComponent = getTypeFor('ComponentA');
if (targetComponent) {
  const instance = new targetComponent();
  // 基于实例进行后续操作
}

这个方案的核心是用Map维护组件类的注册表，通过register方法自动以类名作为标识存储组件，getTypeFor方法则根据名称快速检索对应的组件类，能很灵活地实现组件的动态管理。

内容的提问来源于stack exchange，提问作者Enes Köroğlu