Angular 12+如何通过组件名称/选择器动态加载组件？

核心思路 #

Ivy 架构下 ComponentFactoryResolver 已被废弃，官方推荐直接使用 ViewContainerRef.createComponent() 实现动态组件渲染。要通过组件名称字符串匹配组件，需要维护一个组件名称与组件类的映射表，以此建立字符串到组件类的关联。

具体实现步骤 #

1. 创建组件映射表
   在项目中定义一个全局的组件映射对象，将需要动态渲染的组件名称与对应类关联：

   // component-map.ts
   import { HelloComponent } from './hello/hello.component';
   import { WorldComponent } from './world/world.component';
   import { Type } from '@angular/core';
   
   export const COMPONENT_MAP: Record<string, Type<any>> = {
     HelloComponent: HelloComponent,
     WorldComponent: WorldComponent
   };
   

2. 实现动态渲染指令
   编写一个指令，接收组件名称字符串，通过映射表获取组件类后完成渲染：

   // dynamic-component.directive.ts
   import { Directive, Input, ViewContainerRef, Type } from '@angular/core';
   import { COMPONENT_MAP } from './component-map';
   
   @Directive({
     selector: '[renderComponent]'
   })
   export class RenderComponentDirective {
     @Input() set renderComponent(componentName: string) {
       const ComponentClass = COMPONENT_MAP[componentName];
       if (!ComponentClass) return;
   
       // 清空容器内已有组件
       this.vcr.clear();
       // 创建并挂载组件
       const componentRef = this.vcr.createComponent(ComponentClass);
       
       // 如需给动态组件传递数据，可通过 componentRef.instance 操作
       // componentRef.instance.someInput = 'xxx';
     }
   
     constructor(private vcr: ViewContainerRef) {}
   }
   

3. 模块配置（非独立组件场景）
   将指令和需要动态渲染的组件添加到模块的 declarations 数组中：

   // app.module.ts
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { RenderComponentDirective } from './dynamic-component.directive';
   import { HelloComponent } from './hello/hello.component';
   import { WorldComponent } from './world/world.component';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent,
       RenderComponentDirective,
       HelloComponent,
       WorldComponent
     ],
     imports: [BrowserModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

4. 模板中使用
   在模板里通过指令传入组件名称字符串即可完成渲染：

   <!-- app.component.html -->
   <div renderComponent="HelloComponent"></div>
   <div renderComponent="WorldComponent"></div>
   

关键说明 #

• 映射表是字符串匹配组件的核心，Angular 无法直接通过字符串定位组件类，必须显式建立关联；
• ViewContainerRef.createComponent() 是 Ivy 下的标准动态组件创建方式，替代了原有的 ComponentFactoryResolver 流程；
• 若使用 Angular 14+ 的独立组件，只需在指令或组件的 imports 数组中引入目标组件即可，无需模块配置。

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