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
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 ;-)
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With