Angular2检测服务更改 [英] Angular2 detect change in service

问题描述

我在Angular2中有一个组件，该组件正在更改我的服务translate.service.ts中的"lang"类变量.在另一个组件中，我正在获取带有init转换的字典.如果第一个组件以后更改了服务语言，我想自动在第二个组件中重新获取字典.我该怎么办?

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?

第一个组件:

  setLang(lang) {
    this._translateService.setLang(lang);
  }

服务:

dict = { "en": {}};
lang = "en";

setLang(lang) {
    this.lang = lang;
}

getLang() {
    return this.dict;
}

第二部分:

ngOnInit() {
    this.dict = this._translateService.getDict();
}

推荐答案

在 Mark 的注释之后，应首选Subject/Observable:/Observable >

Following the Mark's comment, a Subject / Observable should be preferred:

EventEmitter仅应用于在组件中发出自定义事件，而我们应将Rx用于其他可观察/事件场景.

EventEmitter should only be used for emitting custom Events in components, and that we should use Rx for other observable/event scenarios.

原始答案:

您应该在服务中使用EventEmitter:

export class LangService {
  langUpdated:EventEmitter = new EventEmitter();

  setLang(lang) {
    this.lang = lang;
    this.langUpdated.emit(this.lang);
  }

  getLang() {
    return this.dict;
  }
}

lang属性更新时，组件可以订阅此事件以得到通知.

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:

• 委派:EventEmitter或可观察的Angular
• 委派:EventEmitter或可观察的Angular

• Delegation: EventEmitter or Observable in Angular
• Delegation: EventEmitter or Observable in Angular

这篇关于Angular2检测服务更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！