Soy nuevo en Angular2 y tengo dos servicios DefaultService y SpecialService que deben usarse alternativamente de acuerdo con el estado de un componente. No sé si puedo inyectar en mi componente un Singleton GeneralService que de alguna manera se comporte como DefaultService o SpecialService cambiando su implementación.
Tengo otra idea para inyectar ambos servicios en generalService y delegar sus métodos al servicio apropiado.
gracias por decirme cómo puedo implementar la primera idea si es factible, o sugerirme otras.
@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(); } } Supongamos que SpecialService y DefaultService extienden GeneralService
Tu primera idea es totalmente posible (si la entendí correctamente). La idea sería crear GeneralService como una interfaz y luego crear dos servicios que hereden de esta interfaz e implementen su función. Luego, a través del injector , obtienes una referencia al que deseas.
Echa un vistazo a este plunker: http://plnkr.co/edit/rjghCDkc5jUjp1SSpjDK
Simplemente cambie el false a true aquí:
if (false) { this.service = this.injector.get(SpecialService); } else { this.service = this.injector.get(DefaultService); } Para ver que el valor registrado en la "consola" cambia. Puse la inicialización en ngOnInit pero puedes hacerlo donde quieras ;-)
La forma más limpia sería usar una interface , ¡así obtendrás 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'; } }demostración en vivo: https://plnkr.co/edit/OM5nnAR0kzSeV24vKqL5?p=preview