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?
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.