Açısal 2 ES6/7 Olay Verici güncellemesi diğer Bileşen

Question

Veriler arasında veri paylaşmak istiyorum, böylece bir EventEmitter içeren bir Hizmet uygulamıyorum.

Benim Servisi şuna benzer: Her iki bileşen yüklendiğinde

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

, dil diziler olarak dolu olsun:

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

} 

Böyle hizmetine abone olan bileşenler, gerek Keşke.

İlk bileşen:

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 böyle abone olan bir tıklama olayı, diğer bileşen ile tetiklenen fonksiyonu toggleLanguageSelection() çalıştırır:

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

olduğu mühim Değişiklikten bahsetme. Bunun, her iki bileşenin de Dil Hizmeti'nin farklı bir örneğini alması nedeniyle gerçekleştiğini düşünüyorum, ancak bundan emin değilim. Ben de bir singleton yaratmaya çalıştım ama angular'2 di artık çalışmıyor. Bu sorunun nedeni nedir ve bunu nasıl çözebilirim?

bootstrap(AppComponent, [ SharedService ]); 

ve değil bileşenlerin providers özelliğinde tekrar tanımlayan:

Answer 1

Başvurunuzu işe koşulması zaman paylaşımlı hizmet tanımlamak gerekir. Bu şekilde, tüm uygulama için tek bir hizmet örneğine sahip olacaksınız. Bileşenler birlikte iletişim kurmak için kullanabilir.

Bu, Angular2'nin "hiyerarşik enjektörleri" özelliğinden kaynaklanır.

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