Search code examples
angularangular2-injection

Injecting different providers while loading components using ComponentResolver in Angular 2

Can we inject different provider while loading components dynamically?

my-component

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

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

some where else,

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

so in above code, while resolving MyComponent, provider for this MyComponentService will also be resolved, can we resolve it differently based upon some switch?

Solution

  • ViewContainerRef.createComponent 

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

    has an injector parameter. If you pass one this one is used to resolve providers. I don't think you can override providers added to the @Component() decorator though.

    You can create a new injector Injector

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

    and pass this injector or you can inject the injector to the component that calls ViewContainerRef.createComponent and create a child injector.

    constructor(private injector:Injector) {}

    Injector is the generic base class ReflectiveInjector is a concrete implementation.

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

    This way the providers that are available to the current component are passed along and Car, and Child are added. Therefore providers that child can't resolve (others than Car and Engine) are tried to resolve from the parent injector.

    Plunker example