Zwei-Wege-Databinding nicht mit mehreren Komponenten und einem Service zu aktualisieren

Question

Ich habe eine Anwendung mit einem "Konfigurator", wo Menschen Produkte aus einer Liste auswählen und filtern Sie diese Liste mit den Bedürfnissen, die sie haben. In dieser configurator Komponente ich habe ein click Ereignis, das als eine Funktion meine Komponente behandelt wird siehe unten:

# configurator.component.ts 

import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
import {Router, ROUTER_DIRECTIVES} from '@angular/router'; 
import {ProductService} from "./product.service"; 
import {Product} from "./product.model"; 
import {CurrencyPipe} from "@angular/common"; 
import {ShoppingcartService} from "../shoppingcart/shoppingcart.service"; 

@Component({ 
    moduleId: module.id, 
    selector: 'configurator', 
    templateUrl: './configurator.component.html', 
    styleUrls: ['./configurator.component.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ProductService, ShoppingcartService], 
    pipes: [CurrencyPipe] 
}) 
export class ConfiguratorComponent implements OnInit { 

    public products:Product[]; 

    constructor(private productService:ProductService, private shoppingcartService:ShoppingcartService) { 
    } 

    ngOnInit() { 
     this.getProducts(); 
    } 

    getProducts() { 
     this.productService.getProducts().then(products => this.products = products); 
    } 

    addProduct(product:Product) { 
     this.shoppingcartService.add(product); 
    } 
} 

Von hier aus sieht alles ok und der Service in addProduct wie erwartet bezeichnet. Der Auslöser für den Service wird ausgeführt und die Palette der Shopping-Cart-Produkte wächst mit jedem einzelnen Klick. Der Dienst wird wie folgt behandelt:

# shoppingcart.service.ts 

import {Injectable} from '@angular/core'; 
import {Product} from "../configurator/product.model"; 

@Injectable() 
export class ShoppingcartService { 

    products:Product[]; 

    constructor() { 
     this.products = []; 
    } 

    get() { 
     return this.products; 
    } 

    add(product:Product) { 
     this.products.push(product); 
    } 

    remove() { 
     console.log('Remove not implemented yet'); 
    } 

    clear() { 
     this.products = []; 
    } 
} 

Das Problem ist, ist, dass die Änderungen von dem add Anruf auf dem Dienst werden auf der Anwendung selbst nicht reflektieren. I definiert, bei der Vorlage ein ngFor aber es scheint nicht, es zu holen:

# shoppingcart.component.html 

<h2>Shoppingcart</h2> 
<div class="row"> 
    <div class="col-md-12"> 
     <ul> 
      <li *ngFor="let product of products"> 
       {{product.name}} 
       <span class="pull-right">{{product.maf | currency:'EUR':true:'1.2'}}</span> 
      </li> 
     </ul> 
    </div> 
</div> 

Und die Warenkorb Komponente selbst:

# shoppingcart.component.ts 

import {Component, OnInit, Input} from '@angular/core'; 
import {Router, ROUTER_DIRECTIVES} from '@angular/router'; 
import {Product} from "../configurator/product.model"; 
import {CurrencyPipe} from "@angular/common"; 
import {ShoppingcartService} from "./shoppingcart.service"; 

@Component({ 
    moduleId: module.id, 
    selector: 'shoppingcart', 
    templateUrl: './shoppingcart.component.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [ShoppingcartService], 
    pipes: [CurrencyPipe] 
}) 

export class ShoppingcartComponent implements OnInit { 

    products:Product[]; 

    constructor(private shoppingCartService:ShoppingcartService) { 
     this.products = []; 
    } 

    ngOnInit() { 
     this.products = this.shoppingCartService.get(); 
    } 
} 

Ich hoffe, es ist etwas klein ist, da es scheint, dass alle Daten da und es sieht so aus, als ob nur die Bindung nicht gut läuft.

Vielen Dank im Voraus

Answer 1

Wenn Sie ShoppingcartService auf jeder Komponente zur Verfügung stellen, wird jede Komponente bekommt es eigene Instanz ist. Wenn eine Komponente Daten im Service aktualisiert, befindet sie sich in einer anderen Instanz als der Service, während eine andere Komponente auf Änderungen wartet.

Geben Sie ShoppingcartServicenur einmal an einer gemeinsamen übergeordneten Komponente. Wenn Sie eine Instanz für die gesamte Anwendung freigeben möchten, ist dies die AppComponent.