How to inject different service token in the same component?

Question

I have component A , B , C and service S .

A and B change a value in service S .

Component C are used twice in different places of the website, so it needs to read different value from service S .

In two component C , I want one uses token tokenFromA , another uses tokenFromB .

How to inject different service token in the same component? Thanks

// Service S

export class Service {
    text:string = '';
}

// Component C

@Component({
    selector: 'c-component',
    providers: [provide("tokenFromA", {useClass: Service})],
    template: `
        <h1>App</h1>
    `
})
export class ComponentC {
    constructor(@Inject('tokenFromA') service:Service) {
    }
}

Answer 1

As far as I know this is only supported for tests by overrideProviders() of the TestComponentBuilder .

It's also possible to request instances directly

constructor(private _injector:Injector) {
  var bar = _injector.get('bar');
  var bar2 = _injector.get('bar2');
}