2017-02-22 4 views
0

Ich habe eine einfache App mit 2 Komponenten und einem Service erstellt, um zu zeigen, wie Elemente zu einem Warenkorb hinzugefügt werden, indem eine Komponente einen Wert in einem Service aktualisieren, den die andere Komponente abonniert hat. Mit dem Plunker-Beispiel this können Sie sehen, dass der Dienst aktualisierte Werte erhält. Wenn Sie jedoch auf den Wert des Korbs klicken, wird die Anzahl der Artikel im Warenkorb der Komponente bei 0 (mit der Datei console.log) angezeigt. Wie bekomme ich die Komponente mit den gleichen Werten wie der Service übereinstimmen?Angular 2 Update-Komponenten mit einem Service

Ich denke, es könnte sein, weil meine Hauptseite so ist, also behandelt es die Komponenten als separate Apps und schafft somit 2 Dienste. Ich möchte nicht alle meine eckigen Komponenten in einer Root-App haben.

<body> 
    <div> 
     Basket Holder<fc-basket>loading basket...</fc-basket><br/><br/> 
    </div> 
    <my-app> 
    loading... 
    </my-app> 
    </body>` 
+0

all den eigentlichen Code erstellen. ohne in den ursprünglichen Code zu schauen, ist es schwer zu verstehen, was passiert –

Antwort

2

Das Problem wurde Sie haben die basketService 3 Mal zur Verfügung gestellt und es gab drei Instanzen des Korbs Service mit ihren eigenen Fluss abonnieren.

  • im App Modulebene, wenn Sie bei app.module definiert
  • an den einzelnen Komponentenebene

Sie brauchen nicht in die Sie provides[service] Komponente, wenn Sie bereits in Ihrem Modul haben es geschafft . sonst wird es eine andere Instanz eher mit der Modulebene Instanz

ich Ihre Plunker aufgelöst bei resolved plunker

+0

Brilliant, danke dafür. –

+0

Bis abstimmen und akzeptieren. Es wird anderen helfen –