Module A
declarations: [myComponent]
providers: [myServiceA]
Module B
declarations: [myComponent]
providers: [myServiceB]
myComponent Shared by Module A and B
class myComponent {
constructor(?) {}
}
myServiceA and myServiceB share the same API. The idea is that myServiceA stores the data locally (lets say localstorage) and myServiceB stores the data on the remote server (lets say Firebase).
How do I inject the correct myService, based on the module the component is loaded from?
I figured out how to do this:
Create abstract class for myServiceA and myServiceB which exposes the same API used by both services.
class abstract ParentService{
someFunc: (arg: string) => any;
}
class myServiceA implements ParentService{
// myServiceA implementation for someFunc
}
class myServiceB implement ParentService{
// myServiceB implementation for someFunc
}
Inject parent class in component.
class myComponent {
constructor(service: ParentService) {}
}
Add different providers in Module A and B
Module A
declarations: [myComponent]
providers: [ { provide: ParentService, useClass: myServiceA } ]
Module B
declarations: [myComponent]
providers: [ { provide: ParentService, useClass: myServiceB } ]
