How to dynamically change angular service implementation?

Question

I'm new to Angular2 and and I have two services DefaultService And SpecialService that shoud be used alternatively according to a component state I don't know if I can Inject into my component a singleton GeneralService that somehow behave like DefaultService or SpecialService by changing its implementation.

I have another idea to inject both services in generalService and delegate thier methods to the appropriate service.

thanks to tell me how can I implement the first Idea if doable, or suggest me anothers.

@Component({
  selector: 'my-app',
   templateUrl : './content.component.html'
})
export class AppComponent  { 
constructor(generalService : GenralService,injector : Injectot){}
@ViewChild(MySon)
    private mySon : MySon;
    state : State;

    onChangeState(newState : State):void{
        if(state = special)
        //this.generalService = this.injector.get('SpecialService');
        myson.updateplease();
    }
}

Assume SpecialService and DefaultService extends GeneralService

Answer 1

The cleaner way would be to use an interface, so you will get intellisense! :)

export interface IYourService {
  func1: (source: string, subString: string) => boolean;
  func2: () => void;
  func3: () => string;
}

@Injectable()
export class SuperService implements IYourService {
  public func1(source: string, subString: string): boolean {
    return true;
  }

  public func2(): void {
    console.log('SuperService: func2();');
  }

  public func3(): string {
    return "SuperService";
  }
}

@Injectable()
export class SpecialService implements IYourService {
  public func1(source: string, subString: string): boolean {
    return false;
  }

  public func2(): void {
    console.log('SpecialService: func2();');
  }

  public func3(): string {
    return "SpecialService";
  }
}

@Injectable()
export class GeneralService {

  public state = 'SuperService';

  constructor (
    private _superService: SuperService,
    private _specialService: SpecialService
  ) {}

  public get instance(): IYourService {
    if (this.state == 'SuperService') return this._superService;
    else return this._specialService;
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 (click)="switchService()">Hello {{name}} - active service: {{ this._generalService.state }} - click me to switch it!</h2>
      <button (click)="labelFunc1.innerHTML = _generalService.instance.func1()">func1</button>
      <label #labelFunc1></label>
      <br />
      <button (click)="_generalService.instance.func2()">func1</button>
      <br />
      <button (click)="labelFunc3.innerHTML = _generalService.instance.func3()">func1</button>
      <label #labelFunc3></label>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private _generalService: GeneralService) {
    this.name = 'Angular2'
  }

  private switchService() {
    if (this._generalService.state == 'SuperService') {
      this._generalService.state = 'SpecialService';
    }
    else this._generalService.state = 'SuperService';
  }
}

live demo: https://plnkr.co/edit/OM5nnAR0kzSeV24vKqL5?p=preview

Answer 2

Your first idea is totally possible (if I understood it correctly). The idea would be to create GeneralService as an interface and then create two services that inherit from this interface and implement its function. Then, via the injector, you get a reference to the one you want.

Have a look at this plunker: http://plnkr.co/edit/rjghCDkc5jUjp1SSpjDK

Just change the false to true in here:

if (false)
{
  this.service = this.injector.get(SpecialService);
}
else
{
  this.service = this.injector.get(DefaultService);
}

To see that the logged value in the "console" changes. I put the initialization in ngOnInit but you could do it everywhere you want ;-)