Kraft mehrere Komponenten die gleiche Instanz eines Dienstes

Question

Der Kontext

Ich schreibe eine Angular2-Anwendung zu verwenden, in dem ich mehrere Dienste wollen verwendet werden, um verschiedene Endpunkte zu treffen. Ich möchte, dass jeder Dienst seine Daten zwischenspeichert, um die Anzahl der Anforderungen zu reduzieren und auch mehreren Komponenten zu ermöglichen, Daten im Cache zu ändern, bevor sie an die Endpunkte gesendet werden.

Der Kodex

@Injectable() 
    export class MyService { 

    private items: any; 

    constructor (private http: Http) { 
    this.items = []; 
    } 

    getItems() { 
    if(!this.items) { 
     return this.http.get(this.endpoint).map((data) => { 
     this.items = data; 
     return data; 
     }); 
    } else { 
     return Observable.of(this.items); 
    } 
    } 

    addItem (item) { 
    this.items.push(item); 
    } 

    saveItems() { 
    return this.http.put(endpoint, this.items); 
    } 
} 

Dann könnte Component1 tun:

userClickedAddItem (item) { 
    this.myService.addItem(item); 
} 

Und Component2 tun könnte:

userClickedSave() { 
    this.myService.saveItems().subscribe((items) => { 
    // Do something 
    }); 
} 

Dann in der Module Komponenten ich etwas tue, wie

@NgModule({ 
    providers: [MyService], 
    declarations: [ 
    Component1 
    Component2 
    ] 
}) 

Das Problem

Da Angular2 einzelne Instanzen der Leistungen instanziiert, obwohl Component1 addItem genannt, denkt Component2 keine Elemente hinzugefügt wurden, da sie eine andere Instanz von MyService hat. Die Internet sagt, dass die Art und Weise, dies zu handhaben, darin besteht, Dienste Singletons zu machen, indem sie auf der Anwendungsebene deklariert werden. Aber ich würde das lieber nicht tun, da ich ein modulares Design für meine Anwendung verwende, die entworfen wurde, um Module nur so zu laden, wie sie benötigt werden; Daher würde ich es vorziehen, die Dienste nach den Modulen und Komponenten zu organisieren, die sie verwenden müssen.

Die Seite von Angular2 unter Hierarchical Dependency Injection erläutert, wie Sie das umgekehrte Problem lösen können, wenn Sie Instanzen von Diensten möchten, die unterschiedliche Daten im Cache haben. Aber es erklärt nicht, wie ich erreichen soll, was ich möchte, nämlich, dass diese Daten zwischen verschiedenen Komponenten bestehen bleiben, die den gleichen Dienst verwenden. Die Erklärung, die es gibt, lässt mich auch denken, dass die Bereitstellung des Dienstes auf der Modulebene genug sein sollte, aber ich bekomme immer noch separate Instanzen des Dienstes in meinen zwei Komponenten.

Gibt es eine Möglichkeit, Daten in einem Dienst zu erhalten, der von zwei Komponenten gemeinsam genutzt wird, ohne den Anbieter des Dienstes für das Anwendungsmodul zu erhöhen?

Answer 1

Gemäß der Angular 2-Dokumentation ist das, was Sie erreichen möchten, zwischen Eltern- und Kindkomponenten möglich.

Sie deklarieren den Dienst in übergeordneten Anbietern, dann verwenden die Kinder die gleiche Instanz.

Wenn Sie es in AppModule deklarieren, verwenden Eltern und Kind eine andere Instanz des Dienstes.

Mehr Parent and children communicate via a service