オブジェクトをサービスからコンポーネントに渡す方法

Question

私のウェブサイトでは、商品を記入できるカートを用意したいと思います。現時点では、カートをオブジェクトの形で含むサービス（cart）を使用してこれを処理しようとしています。これにアイテムを追加してカート全体をPromiseとして返す機能があります。現時点ではカートにアイテムを追加することしかできませんが、getCart()からcart.component.tsに電話しようとするとすぐに、それが格納していたと思われるものとは違った完全空の配列が返されているようです。私はこれについて誤ったやり方をしていますか？

cart.service.ts 

import {Injectable, EventEmitter} from '@angular/core'; 
import {Item} from '../../models/item.model'; 


@Injectable() 
export class CartService{ 
    public cart:Item[] = []; 

    constructor(){ 
    } 

    updateCart(){ //just prints the cart size 
    console.log('cart size: ' + this.cart.length); 
    } 
    addItem(item:Item){ //adds an item 
    this.cart.push(item); 
    this.updateCart(); 
    } 
    checkout(){ //wipes cart 
    console.log('cart wiped'); 
    this.cart = []; 
    this.updateCart(); 
    } 


    getCart(): Promise<Item[]>{ //returns the cart 
    console.log('getting cart'); 
    this.updateCart(); 
    return Promise.resolve(this.cart); 
    } 
} 

---

cart.component.ts 

    import {Component, OnInit} from '@angular/core'; 
    import { CartService } from './cart.service'; 
    import {Item} from '../../models/item.model'; 


    @Component({ 
     moduleId: module.id, 
     selector: 'sd-cart', 
     templateUrl: 'cart.component.html', 
     styleUrls: ['cart.component.css'], 
     providers: [CartService] 
    }) 

    export class CartComponent implements OnInit{ 
     public cart: Item[]; 
     constructor(private cartService:CartService){ 
     this.cartService.getCart().then(cart => this.cart = cart); 
     if (!this.cart) 
      console.log('error getting cart'); 
     else console.log(this.cart.length + ' got cart'); 
     } 
     ngOnInit(){ 

     } 
    } 

私が午前問題は、私は別のコンポーネントからカートにItem Sを追加するたびに、それが正しくできるだけ早くサービス（console.log('cart size: ' + this.cart.length);）からcartの長さを示しますがあります私はそれを追加した項目の数にかかわらず同じconsole.log()が配列0であることを印刷する（コンポーネントのコンストラクタを起動する）コンポーネントをロードします。 cart.component.tsの内部では、if (!this.cart) console.log('error getting cart');も、this.cartService.getCart().then(cart => this.cart = cart);という呼び出しからトリガーします。私は多くのチュートリアルを見て、他の誰かのカートサービスを試してみても何のこともない。

Answer 1

注入する場所のどこにでもCartServiceを入力しないでください。これは

@Component({ 
    moduleId: module.id, 
    selector: 'sd-cart', 
    templateUrl: 'cart.component.html', 
    styleUrls: ['cart.component.css'], 
    providers: [CartService] // <<<== remove here 
}) 

のみ@NgModule()の提供者にサービスを追加する独自のインスタンスを取得し、すべてのコンポーネントにつながります。これらのプロバイダは、アプリケーションのルートスコープに持ち込まれ、1つのインスタンスのみが存在し、それに依存するすべてのコンストラクタに渡されます。

注：遅延読み込みモジュールには独自のルートスコープがあり、プロバイダーはアプリケーションルートスコープに乗せられません。