如何将ProviderToken<SomeComponent>转换为SomeComponent组件？

在Angular中，你可以通过Injector来获取ProviderToken对应的组件类，具体步骤如下：

1. 确保ProviderToken的正确配置 #

首先要保证你的ProviderToken是绑定到组件类本身，而不是组件实例。比如定义Token时：

import { InjectionToken, ProviderToken } from '@angular/core';
import { SomeComponent } from './some.component';

// 定义Token，工厂函数返回组件类本身
export const SOME_COMPONENT_TOKEN: ProviderToken<typeof SomeComponent> = 
  new InjectionToken('SomeComponentToken', {
    providedIn: 'root',
    factory: () => SomeComponent
  });

或者在模块/组件的providers数组中配置：

providers: [
  { 
    provide: SOME_COMPONENT_TOKEN, 
    useValue: SomeComponent // 注意这里用useValue传组件类，不是useClass
  }
]

2. 通过Injector获取组件类 #

在需要转换的组件或服务中，注入Injector实例，然后用injector.get()方法获取对应的组件类，再传给viewContainerRef.createComponent()：

import { Component, Injector, ViewContainerRef, OnInit, ViewChild } from '@angular/core';
import { SOME_COMPONENT_TOKEN } from './tokens';

@Component({
  selector: 'app-example',
  template: `<div #container></div>`
})
export class ExampleComponent implements OnInit {
  constructor(private injector: Injector) {}

  @ViewChild('container', { read: ViewContainerRef }) 
  private containerRef!: ViewContainerRef;

  ngOnInit(): void {
    // 从Token中获取实际的组件类
    const targetComponent = this.injector.get(SOME_COMPONENT_TOKEN);
    // 创建组件
    this.containerRef.createComponent(targetComponent);
  }
}

关键注意点 #

• 不要混淆组件类和组件实例：createComponent()需要的是组件类（构造函数），所以你的ProviderToken必须提供类本身，而不是new出来的实例。
• 如果用useClass配置Provider，会自动创建组件实例，这不符合需求，必须用useValue直接传递组件类，或者在InjectionToken的factory中返回组件类。

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