angular 2 manipulieren Daten in einem Dienst ändert sich nicht in der zweiten Komponente

Question

Ich habe eine plunker mit dieser Frage.

Ich beabsichtige, Daten von einer Komponente zu anderen Komponenten über einen Winkelservice zu übergeben. Diese Komponenten haben nicht unbedingt Eltern-Kind-Beziehungen. Die Beispiel Blumendaten sind ursprünglich in DataService gespeichert.

Sag mal, in der Komponente A, habe ich

changeName(tInput.value) 

versuchen, Daten zu manipulieren, in DataService, mit Code wie:

changeName(name: string) { 
    this.dataService.aFlower["name"] = name; 
    console.log(`Name changed to ${ name }.`) 
    } 

Während in der Komponente B, ein String-Variable

objName: string = this.dataService.aFlower.name

, um die vonübergebenen Daten zu erhaltenund eine Eigenschaft

<h2 [innerHTML]="objName">h2 placeholder</h2>

in Template-Bindungs ​​um die Daten anzuzeigen.

Ich habe auch eine

<h2 [innerHTML]="dataService.aFlower.name">h2 placeholder</h2>

Daten direkt aus dem Dienst zu holen

Die Frage ist, wenn ich geben Sie den neuen Namen und changeName("a new name") in der Komponente A laufen, der Name ändert sich nicht in Komponente B .Both h2 Tags zeigen ursprüngliche Namen.

Via Debug-Tool habe ich festgestellt, dass Daten von DataService abgerufen wurden nicht geändert wurden.

Warum passiert das und was soll ich tun?

Answer 1

Sie müssen den Service-Provider auf Ihrem Modulebene erklären, so wird es Sie müssen für alle untergeordneten Komponenten einzeln sein und die Deklaration von jeder Komponente entfernen. Fixed plnkr

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppParent, AppChild ], 
    bootstrap: [ AppParent ], 
    providers: [DataService] 
}) 

Answer 2

Sie verschiedene Instanzen des Service in parent und child injizieren.

Sie müssen sicherstellen, dass sie beide eine einzelne Instanz Ihrer Dienstleistung teilen.

entfernen So providers: [DataService] von beiden @Component Dekorateur der Komponente und fügen Sie es zu @NgModule decoarator wie unten gezeigt,

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ AppParent, AppChild ], 
    bootstrap: [ AppParent ], 

    providers: [DataService]    //<<<-----here 

})