Angular5动态组件解析：多模块组件嵌入实现方案问询

你的思路非常贴合Angular的模块化设计思想——模仿RouterModule的forRoot/forChild模式来让特性模块自主注册组件映射，完美适配你无法用路由但需动态加载指定组件的场景。下面我会一步步拆解这个方案的落地细节：

1. 定义组件注册的统一契约 #

首先我们需要一个标准化的接口，让所有模块都能按照相同格式提供组件映射：

export interface ComponentMap {
  moduleName: string;
  components: { [key: string]: Type<any> };
}

2. 实现ComponentDirectoryModule核心逻辑 #

我们要创建一个能收集全局组件映射的模块，通过forRoot和forChild分别处理根模块和特性模块的注册请求：

第一步：创建注入令牌存储组件映射 #

用Angular的注入令牌来保存所有模块注册的组件集合：

export const COMPONENT_MAPS = new InjectionToken<ComponentMap[]>('COMPONENT_MAPS');

第二步：编写模块的forRoot/forChild方法 #

@NgModule()
export class ComponentDirectoryModule {
  static forRoot(componentMaps: ComponentMap[] = []): ModuleWithProviders<ComponentDirectoryModule> {
    return {
      ngModule: ComponentDirectoryModule,
      providers: [
        { provide: COMPONENT_MAPS, useValue: componentMaps },
        ComponentDirectoryService
      ]
    };
  }

  static forChild(componentMaps: ComponentMap[]): ModuleWithProviders<ComponentDirectoryModule> {
    return {
      ngModule: ComponentDirectoryModule,
      providers: [
        { provide: COMPONENT_MAPS, useValue: componentMaps, multi: true }
      ]
    };
  }
}

• forRoot：在根模块调用，负责初始化根级组件映射，同时确保ComponentDirectoryService是全局单例
• forChild：在特性模块调用，通过multi: true将当前模块的组件映射追加到全局集合中

3. 改造ComponentDirectoryService #

让服务依赖注入COMPONENT_MAPS令牌，实现根据moduleName和componentName快速查找组件的逻辑：

@Injectable()
export class ComponentDirectoryService {
  private componentLookup: Map<string, Map<string, Type<any>>> = new Map();

  constructor(@Inject(COMPONENT_MAPS) componentMaps: ComponentMap[]) {
    // 把扁平的组件映射转换成双层Map，提升查找效率
    componentMaps.forEach(map => {
      const componentMap = new Map(Object.entries(map.components));
      this.componentLookup.set(map.moduleName, componentMap);
    });
  }

  getComponent(moduleName: string, componentName: string): Type<any> | undefined {
    const moduleComponents = this.componentLookup.get(moduleName);
    return moduleComponents?.get(componentName);
  }
}

4. 特性模块注册组件示例 #

每个特性模块只需调用forChild，就能把自身组件注册到全局目录中：

@NgModule({
  declarations: [UserProfileComponent, UserSettingsComponent],
  imports: [
    CommonModule,
    ComponentDirectoryModule.forChild([
      {
        moduleName: 'UserModule',
        components: {
          Profile: UserProfileComponent,
          Settings: UserSettingsComponent
        }
      }
    ])
  ]
})
export class UserModule {}

5. 根模块初始化配置 #

在根模块中调用forRoot完成全局初始化（如果有根级组件需要注册的话）：

@NgModule({
  declarations: [AppComponent, DashboardComponent],
  imports: [
    BrowserModule,
    ComponentDirectoryModule.forRoot([
      {
        moduleName: 'RootModule',
        components: {
          Dashboard: DashboardComponent
        }
      }
    ]),
    UserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

6. 父组件动态加载组件示例 #

在需要嵌入组件的父组件中，注入服务并动态创建组件实例：

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

  constructor(private componentDirService: ComponentDirectoryService) {}

  ngOnInit(): void {
    // 按需获取目标组件
    const TargetComponent = this.componentDirService.getComponent('UserModule', 'Profile');
    if (TargetComponent) {
      // 在宿主容器中创建组件
      this.host.createComponent(TargetComponent);
    }
  }
}

这个方案完全遵循Angular的模块化设计理念，既保证了各模块组件映射的独立性，又能通过统一服务实现高效的组件查找与动态加载，完美解决你当前的需求。

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