Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
765 views
in Technique[技术] by (71.8m points)

angular - Angular2 detect change in service

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();
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...