在 Angular 2 中使用 ComponentResolver 加载组件时注入不同的提供程序

Question

我们可以在动态加载组件时注入不同的提供程序吗？

我的组件

  @Component({
     moduleId: module.id,
     selector: "my-component",
     template: "<div>my-component</div>",
     providers: [MyComponentService]
  })
  export class MyComponent{

     constructor(private ds: MyComponentService) {
        super();
     }    
   }

其他地方，

     this._cr.resolveComponent(MyComponent).then(cmpFactory => {
        let instance: any = this.testComponentContainer.createComponent(cmpFactory).instance;
    });

所以在上面的代码中，在解析 MyComponent 的同时，这个 MyComponentService 的提供者也会被解析，我们可以根据一些开关以不同的方式解析它吗？

Answer 1

ViewContainerRef.createComponent

createComponent(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]) : ComponentRef<C>

有一个 injector 参数。如果你通过一个，这个用于解析提供者。不过，我认为您不能覆盖添加到 @Component() 装饰器的提供程序。

您可以创建一个新的注入器Injector

let injector = ReflectiveInjector.resolveAndCreate([Car, Engine])

并传递此注入器，或者您可以将注入器注入调用 ViewContainerRef.createComponent 的组件并创建子注入器。

constructor(private injector:Injector) {}

Injector是通用基础classReflectiveInjector是具体实现

let resolvedProviders = ReflectiveInjector.resolve([Car, Engine]);
let child = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);

这样，当前组件可用的提供程序将被传递并添加 Car 和 Child。因此 child 无法解析的提供者（Car 和 Engine 以外的提供者）会尝试从父注入器解析。

Plunker example

在 Angular 2 中使用 ComponentResolver 加载组件时注入不同的提供程序

Injecting different providers while loading components using ComponentResolver in Angular 2

angular2-injection

angular