複数のコンポーネントとサービスで双方向のデータバインディングが更新されない

Question

私は、リストから製品を選択し、そのリストを必要に応じてフィルタすることができる「コンフィギュレータ」を持つアプリケーションを持っています。このconfiguratorコンポーネントでは、私は、関数として扱われclickイベントは、以下の私のコンポーネントを参照してくださいしている：ここから

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

すべてがOKに見えると予想通りaddProductでサービスが呼び出されます。サービスのトリガーが実行され、ワンクリックごとにショッピングカート製品の配列が増えています。サービスは、このように処理される：ある

# 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 = []; 
    } 
} 

問題は、サービスにaddコールからの変更は、アプリケーション自体に反映されないことです。私は、テンプレートでngForを定義したが、それを拾うていないようです：

# 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> 

そして、ショッピングカートのコンポーネント自体：

# 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(); 
    } 
} 

私はすべてのデータがあるようですので、それは小さなものです願っていますそこには結束だけがうまくいかないように見えます。あなたはすべてのコンポーネントにShoppingcartServiceを提供する場合、事前

Answer 1

で

おかげで、すべてのコンポーネントは、それ自身のインスタンスを取得します。あるコンポーネントがサービス内のデータを更新する場合、そのコンポーネントはサービスとは異なるインスタンスにあり、別のコンポーネントは変更をリッスンします。

提供 共通の親コンポーネントでを1回だけ提供します。 1つのインスタンスをアプリケーション全体と共有する場合は、これはAppComponentです。