如何渲染从Map中保存的Angular组件？

问题原因 #

你遇到的ASSERTION ERROR: Type passed in is not ComponentType错误，核心原因是你在服务中保存的是组件的实例（this），而不是组件类本身。Angular的动态组件渲染需要的是带有@Component装饰器的类（即ComponentType），这类类在编译后会被添加ɵcmp标识属性，而组件实例是类的实例化对象，没有这个属性，所以无法被识别。

修正方案 #

1. 调整服务的类型与存储逻辑 #

修改服务，明确存储的是组件类（Type<any>），而非任意类型：

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

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

  addComponent(name: string, component: Type<any>): void {
    this.componentMap.set(name, component);
  }

  getComponent(name: string): Type<any> | undefined {
    return this.componentMap.get(name);
  }
}

2. 保存组件类而非实例 #

在需要注册组件的地方，传递组件类（比如YourComponent）而不是实例this：

import { Component, OnInit } from '@angular/core';
import { YourService } from './path-to-your-service';
// 导入当前组件的类
import { YourComponent } from './your-component.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
})
export class YourComponent implements OnInit {
  constructor(private yourService: YourService) {}

  ngOnInit(): void {
    // 注册组件类，而非实例
    this.yourService.addComponent('yourComponentName', YourComponent);
  }
}

3. 正确动态渲染组件 #

Angular 13+推荐直接使用ViewContainerRef.createComponent方法，无需再依赖ComponentFactoryResolver：

import { Component, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core';
import { YourService } from './path-to-your-service';

@Component({
  selector: 'app-another-component',
  template: '<ng-container #dynamicContainer></ng-container>',
})
export class AnotherComponent implements AfterViewInit {
  @ViewChild('dynamicContainer', { read: ViewContainerRef }) dynamicContainer!: ViewContainerRef;   

  constructor(private yourService: YourService) {}

  ngAfterViewInit(): void {
    const ComponentClass = this.yourService.getComponent('yourComponentName');
    
    if(ComponentClass) {
      // 直接创建组件实例
      const componentRef = this.dynamicContainer.createComponent(ComponentClass);
      // 若需传递输入属性，可通过实例访问
      // componentRef.instance.yourInput = '测试值';
    }
  }
}

额外注意事项 #

• 若使用Angular 9及以下版本，需要将动态渲染的组件添加到模块的entryComponents数组中，确保Angular编译时能识别它；Angular 9+（启用Ivy编译器）则无需此步骤。
• 确保注册的类是Angular组件（带有@Component装饰器），普通类无法被动态渲染。
• 如果需要给动态组件传递复杂数据或依赖，可以在createComponent时传入自定义Injector配置。

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