I have one component in Angular2 which is changing a "lang" class variable in my service translate.service.ts. In another component I am fetching a dict with the translation on init. If the first component changes the services language later, I want to refetch the dict in the second component automatically. How do I do that?
First component:
setLang(lang) {
this._translateService.setLang(lang);
}
Service:
dict = { "en": {}};
lang = "en";
setLang(lang) {
this.lang = lang;
}
getLang() {
return this.dict;
}
Second component:
ngOnInit() {
this.dict = this._translateService.getDict();
}
Edit:
Following the Mark's comment, a Subject / Observable should be preferred:
EventEmitter should only be used for emitting custom Events in components, and that we should use Rx for other observable/event scenarios.
Original Answer:
You should use an EventEmitter in the service:
export class LangService {
langUpdated:EventEmitter = new EventEmitter();
setLang(lang) {
this.lang = lang;
this.langUpdated.emit(this.lang);
}
getLang() {
return this.dict;
}
}
Components could subscribe on this event to be notified when the lang property is updated.
export class MyComponent {
constructor(private _translateService:LangService) {
}
ngOnInit() {
this._translateService.langUpdated.subscribe(
(lang) => {
this.dict = this._translateService.getDict();
}
);
}
}
See this question for more details: