Angular 2 ES6/7 Eventemitter 更新其他组件答案

【问题标题】：Angular 2 ES6/7 Eventemitter update other ComponentAngular 2 ES6/7 Eventemitter 更新其他组件
【发布时间】：2016-07-15 02:46:51
【问题描述】：

我想在组件之间共享数据，所以我实现了一个具有 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 不再起作用了。这个问题的原因是什么，我该如何解决？

【问题讨论】：

请不要使用EventEmitter on services。

标签： javascript node.js angular rxjs eventemitter

【解决方案1】：

您需要在引导您的应用程序时定义您的共享服务：

bootstrap(AppComponent, [ SharedService ]);

不要在组件的providers 属性中再次定义它。这样，您将拥有整个应用程序的服务的单个实例。组件可以利用它进行通信。

这是因为 Angular2 的“分层注入器”特性。有关更多详细信息，请参阅此问题：

What's the best way to inject one service into another in angular 2 (Beta)?

【讨论】：