Угловой 2 ES6/7 Обновление повторителя событий другой Компонент

Question

Я хочу обмениваться данными между компонентами, поэтому им была реализована Служба, имеющая EventEmitter.

My Service выглядит следующим образом:

@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 выполняет функцию toggleLanguageSelection(), который срабатывает на событие щелчка, другой компонент, который подписывается так:

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

Безразлично» t не сообщается об изменениях. Я думаю, это происходит потому, что оба компонента получают другой экземпляр моего LanguageService, но я не уверен в этом. Я также попытался создать синглтон, но angular'2 di больше не работает. В чем причина этой проблемы и как я могу это решить?

Answer 1

Вы должны определить свою общую службу, когда развернув приложение:

bootstrap(AppComponent, [ SharedService ]); 

и не определив его снова в атрибуте ваших компонентов providers. Таким образом, у вас будет один экземпляр службы для всего приложения. Компоненты могут использовать его для совместного общения.

Это из-за функции «иерархических форсунок» для Angular2. Для получения более подробной информации см этот вопрос:

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