Question

我是Angular2的新手，我有两个服务DefaultService和SpecialService，可以根据组件状态交替使用我不知道是否可以通过更改其实现来向我的组件中注入单个GeneralService，其行为类似于DefaultService或SpecialService。

我还有另一个想法是在generalService中注入两个服务，并将这些方法委托给相应的服务。

感谢告诉我，如果可行的话，我怎么能实施第一个想法，或者建议我给别人。

@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

Answer 1

你的第一个想法是完全可能的（如果我理解正确的话）。我们的想法是创建GeneralService作为接口，然后创建两个从该接口继承并实现其功能的服务。然后，通过injector，您可以获得所需的引用。

看看这个plunker：http://plnkr.co/edit/rjghCDkc5jUjp1SSpjDK

只需在此处将false更改为true：

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

要查看“控制台”中记录的值发生更改。我将初始化放在ngOnInit中，但您可以随意执行; - ）

Answer 2

更干净的方法是使用interface，这样你就会获得智能感知！：）

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

改变动态角度服务实现

2 个答案: