如何在Angular运行时动态注册模块/组件提供者？

Angular的组件元数据（包括providers）是静态解析的，没法直接在组件的providers数组里引用barServiceInstance这种运行时实例的属性——毕竟组件元数据在应用启动时就被处理了，那时候BarService还没实例化呢。给你几个可行的解决思路：

1. 手动用注入器获取实例（最简单） #

如果只是需要在组件里使用这些服务，不用让它们自动注入到构造函数，可以直接在组件里注入Injector和BarService，然后手动解析服务实例：

@Component({
  selector: 'foo-component',
  templateUrl: './foo.component.html'
})
export class FooComponent {
  service1: Service1;
  service2: Service2;
  service3: Service3;

  constructor(private barService: BarService, private injector: Injector) {
    // 遍历BarService里的提供者，逐个获取实例
    this.barService.manyProviders.forEach(provider => {
      // 处理类类型的提供者（如果有其他类型比如useClass/useValue，需要额外判断）
      if (typeof provider === 'function') {
        const instance = this.injector.get(provider);
        // 根据服务类型赋值到组件属性
        if (instance instanceof Service1) this.service1 = instance;
        else if (instance instanceof Service2) this.service2 = instance;
        else if (instance instanceof Service3) this.service3 = instance;
      }
    });
  }
}

注意：这种方式要求这些服务已经在模块或父注入器中提供了，如果想让组件拥有自己的独立实例，看下面的方法。

2. 动态创建组件并传入自定义注入器 #

如果希望这些服务能自动注入到FooComponent的构造函数里，并且是组件级别的独立实例，可以通过动态创建组件的方式，给它传一个包含目标提供者的自定义注入器：

首先，确保FooComponent被加入模块的entryComponents（Angular 9+可省略，但显式声明更稳妥）：

@NgModule({
  declarations: [FooComponent],
  entryComponents: [FooComponent],
  providers: [BarService]
})
export class YourModule {}

然后在父组件里动态创建FooComponent：

@Component({
  selector: 'parent-component',
  template: '<div #container></div>'
})
export class ParentComponent {
  @ViewChild('container', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private cfr: ComponentFactoryResolver,
    private barService: BarService,
    private parentInjector: Injector
  ) {}

  ngAfterViewInit() {
    // 创建包含目标提供者的子注入器
    const childInjector = Injector.create({
      providers: this.barService.manyProviders,
      parent: this.parentInjector
    });

    // 解析FooComponent的工厂并创建组件
    const factory = this.cfr.resolveComponentFactory(FooComponent);
    const componentRef = this.container.createComponent(factory, undefined, childInjector);
    
    // 此时FooComponent的构造函数里就能直接注入Service1/2/3了
  }
}

3. 使用EnvironmentInjector创建子注入器（Angular 14+） #

如果是Angular 14及以上版本，可以用EnvironmentInjector来创建子注入器，灵活管理动态提供者：

@Component({
  selector: 'foo-component',
  templateUrl: './foo.component.html'
})
export class FooComponent {
  private childInjector: EnvironmentInjector;

  constructor(private barService: BarService, private envInjector: EnvironmentInjector) {
    // 创建包含目标提供者的子环境注入器
    this.childInjector = this.envInjector.createChild({
      providers: barService.manyProviders
    });

    // 从子注入器获取服务实例
    const service1 = this.childInjector.get(Service1);
    // 后续可直接使用service1
  }
}

如果要让组件视图内的子组件也能使用这些提供者，可以将childInjector绑定到组件的视图注入器，结合ViewContainerRef实现。

另外，你之前尝试的useFactory返回提供者数组的方式行不通——Angular会把返回的数组当成普通值，而不是DI提供者配置。useFactory的作用是返回单个服务的实例，而非提供者列表。

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