Angular 2 ES6/7 Eventemitter update otherコンポーネント

Question

コンポーネント間でデータを共有したいので、EventEmitterを持つサービスを実装しました。

私のサービスは、次のようになります。

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

両方のコンポーネントがロードされると、言語の配列は次のように満たされます：このようなサービスに加入されているコンポーネントに私が持っている

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

} 

私は望む。

これは最初の成分である：

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

」はdoesnのその変化に気づかないでください。これは両方のコンポーネントが私のLanguageServiceの別のインスタンスを取得するために起こると思いますが、私はそれについてはわかりません。私もシングルトンを作成しようとしましたが、角度 '2 diはもう動作しません。この問題の理由は何ですか？これをどのように解決できますか？

Answer 1

あなたはあなたのアプリケーションのブートストラップするとき、共有サービスを定義する必要があります。

bootstrap(AppComponent, [ SharedService ]); 

はなく、あなたのコンポーネントのproviders属性以内に再度それを定義します。このようにすると、アプリケーション全体に対して単一のサービスインスタンスが作成されます。コンポーネントは、それを活用して相互に通信することができます。

これは、Angular2の「階層インジェクタ」機能のためです。

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