I have 2 services one.service.ts and two.service.ts, and a component dashboard.component.ts.
How to conditionally inject those service into the component?
import { Component, ViewEncapsulation, Inject } from '@angular/core';
import { OneService } from '../services/one.service';
import { TwoService } from '../services/two.service';
@Component({
selector: 'dashboard',
encapsulation: ViewEncapsulation.Emulated,
styleUrls: ['./dashboard.less'],
templateUrl: './dashboard.html'
})
export class DashboardComponent {
constructor() {
// Here how do I get service instance based on some this condition.
if(true) {
/* Service **one.service.ts** to be injected */
} else {
/* Service **two.service.ts** to be injected */
}
}
}
You can use the Injector
import { Injector } from '@angular/core'
...
constructor(private injector: Injector){
if(true) {
this.oneService = <OneService>this.injector.get(OneService);
} else {
this.twoService = <TwoService>this.injector.get(TwoService);
}
}
As @MeirionHughes mentioned this is called the service locator pattern:
The technique is an example of the service locator pattern.
Avoid this technique unless you genuinely need it. It encourages a careless grab-bag approach such as you see here. It's difficult to explain, understand, and test. You can't know by inspecting the constructor what this class requires or what it will do. It could acquire services from any ancestor component, not just its own. You're forced to spelunk the implementation to discover what it does.
Framework developers may take this approach when they must acquire services generically and dynamically.
Source: https://angular.io/docs/ts/latest/guide/dependency-injection.html#!#explicit-injector
And again as mentioned you can get these injectors in another service and then inject this service into your component.