如何动态更改角度服务的实现? [英] How to dynamically change angular service implementation?

问题描述

我是Angular2的新手，我有两个服务DefaultService和SpecialService，应根据组件状态交替使用 我不知道是否可以通过更改其实现将单例GeneralService注入到组件中，使其在某种程度上像DefaultService或SpecialService.

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.

我还有另一种想法，将两种服务都注入到generalService中，并将其方法委托给适当的服务.

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

假设SpecialService和DefaultService扩展GeneralService

推荐答案

更简洁的方法是使用interface，这样您将获得智能感知！ :)

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';
  }
}

实时演示: https://plnkr.co/edit/OM5nnAR0kzSeV24vKqL5?p=preview

这篇关于如何动态更改角度服务的实现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！