SharedServiceを使用してSharedServiceを使用してアイテムをアイテムにプッシュする

Question

アイテムをバスケットに追加するときにカートの数を更新しようとしていますが、localStorageを使用してアイテムを保存すると思う唯一の方法ですユーザーがアイテムを追加すると直ちにUIが表示されます。

SharedServiceを作成してそこにアイテムをプッシュできると思ったが、ユーザーがアイテムを追加したときにそのサービスからアイテムのarrayを取得してUIを更新するにはどうすればよいですか？これまで

SharedService -

export class SharedServiceService { 
public itemArr: any = []; 
    constructor() { } 

    itemCollection(item) { 
    this.itemArr.push(item); 
    console.log(this.itemArr); 
    } 
} 

マイAddToBasket成分関数 -

addToBasket(itemCode) { 
    this.sharedServiceService.itemCollection(itemCode); 
} 

私はそれがこのような単純なものだろうと思って、私のapp.componentからアイテムのarrayを取得したいですしかし、それはこのthis.basketCountが空の配列[]を返すようにではありません。私はarrayの長さが(10) Itemsであることを示したいと思います。

ngOnInit() { 
// console.log(this.sharedServiceService.itemArr); 
    this.basketCount = this.sharedServiceService.itemArr; 
    } 

Plnkr example

Answer 1

はい、それは配列を取得するのと同じくらい簡単です。あなたがngOnInit（）でそれをやっているので、あなたのケースではうまくいかないかもしれません。なぜなら、配列がまだ空のときに一度しか動作しないからです。しかし、あなたはどこかにそれを置く場合は、あなたのアプリケーションコンポーネントのテンプレートでは、たとえば、あなたはそれを更新方法について説明します。

<div> 
    <h2>Basket Count ({{sharedService.itemArr.length}}) show count</h2> 
    <app-basket></app-basket> 
    {{ sharedService.itemArr | json }} 
</div> 

を読みやすくするために、あなたはまた、計算されたプロパティを使用することがあります。

private get basketCount():number { 
    return this.sharedService.itemArr.length; 
} 

private get basket { 
    return this.sharedService.itemArr; 
} 

そして、あなたは単純に計算されたプロパティを補間：

<div> 
    <h2>Basket Count ({{ basketCount }}), or ({{ basket.length }}) show count</h2> 
    <app-basket></app-basket> 
    {{ basket | json }} 
</div> 

Answer 2

私はあなたがすでに上から答えを持っているが、私はngrxの大ファンですとどのような状況のために私のために動作します参照してください。私は非常にあなたがそれを見てお勧めします。ストアレベルのソリューションは常に機能し、一度それを握ると中毒性があります:)