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

slaesh · Accepted Answer · 2017-03-09 15:33:41Z

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

hey looking to the plnkr it seems good, I didn't yet see the code well. thanks @mxii you're phantastic :)

ssougnez · Accepted Answer · 2017-03-09 15:31:50Z

4

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 ;-)

answered Mar 9, 2017 at 15:31

ssougnez

5,98616 gold badges54 silver badges90 bronze badges

Collectives™ on Stack Overflow

How to dynamically change angular service implementation?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related