Angular2检测服务变化

Question

我在 Angular2 中有一个组件正在更改我的服务 translate.service.ts 中的“lang”类变量。在另一个组件中，我正在获取一个带有 init 翻译的字典。如果第一个组件稍后更改服务语言，我想自动重新获取第二个组件中的字典。我该怎么做？

第一个组件：

  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();
}

Answer 1

编辑：

在Mark 的评论之后，Subject / Observable 应该是首选：

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

原答案：

您应该在服务中使用EventEmitter：

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

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

  getLang() {
    return this.dict;
  }
}

组件可以订阅此事件，以便在 lang 属性更新时收到通知。

export class MyComponent {
  constructor(private _translateService:LangService) {
  }

  ngOnInit() {
    this._translateService.langUpdated.subscribe(
      (lang) => {
        this.dict = this._translateService.getDict();
      }
    );
  }
}

查看这个问题了解更多详情：

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