Angular 2 ES6 / 7 Eventemitter更新其他組件

Question

我想在組件之間共享數據，所以我實現了具有EventEmitter的服務。

我的服務如下所示：

@Injectable()
export class LanguageService {



  constructor() {
    this.languageEventEmitter = new EventEmitter();
    this.languages = [];

    this.setLanguages();
  }

  setLanguages() {

    var self = this;

    axios.get('/api/' + api.version + '/' + api.language)
      .then(function (response) {
        _.each(response.data, function (language) {
          language.selected = false;
          self.languages.push(language);
        });
        self.languageEventEmitter.emit(self.languages);
      })
      .catch(function (response) {
      });
  }

  getLanguages() {
    return this.languages;
  }

  toggleSelection(language) {
    var self = this;
    language.selected = !language.selected;
    self.languages.push(language);
    self.languageEventEmitter.emit(self.languages);
  }

}

我必須要訂購這樣的組件：

self.languageService.languageEventEmitter.subscribe((newLanguages) => {
  _.each(newLanguages, function (language) {
    self.updateLanguages(language);
  });
});

當兩個組件都加載后，語言數組將按我的意願填充。

這是第一個組件：

export class LanguageComponent {

  static get parameters() {
    return [[LanguageService]];
  }

constructor(languageService) {
  var self = this;

  this.languageService = languageService;
  this.languages = [];

  this.setLanguages();
}

setLanguages() {

  var self = this;

  self.languageService.languageEventEmitter.subscribe((newLanguages) => {
    _.each(newLanguages, function (language) {
      self.updateLanguages(language);
    })
  });

}

updateLanguages(newLanguage) {
  var self = this;

  if (!newLanguage) {
    return;
  }

  var match = _.find(self.languages, function (language) {
    return newLanguage._id === language._id;
  });

  if (!match) {
    self.languages.push(newLanguage);
  }

  else {
    _.forOwn(newLanguage, function (value, key) {
      match[key] = value;
    })
  }

  toggleLanguageSelection(language) {
    var self = this;
    self.languageService.toggleSelection(language)
  }

}

當LanguageComponent執行由click事件觸發的功能toggleLanguageSelection（）時，另一個組件的訂閱如下：

self.languageService.languageEventEmitter.subscribe((newLanguages) => {
  _.each(newLanguages, function (language) {
    self.updateLanguages(language);
  })
});

不會對變更感到不滿。 我認為發生這種情況是因為兩個組件都獲得了我的LanguageService的不同實例，但是我不確定。 我也嘗試創建一個單例，但是angular'2 di不再起作用了。 此問題的原因是什么，我該如何解決？

Answer 1

引導應用程序時，需要定義共享服務：

bootstrap(AppComponent, [ SharedService ]);

而不是在組件的providers屬性中再次定義它。 這樣，您將擁有整個應用程序的單個服務實例。 組件可以利用它來進行通信。

這是因為Angular2具有“分層注入器”功能。 有關更多詳細信息，請參見以下問題：

• 將一項服務以角度2（測試版）注入另一項服務的最佳方法是什么？