イオン2保存してショッピングカートのアイテムのlocalStorage

Question

を取得し、私はショッピングカート機能でionic 2 applicationを作成しましたが、私の問題は私save the item in the cartこの場合他のページとオープンthe cartに行くカートはあるとき空

私の質問：私は、ショッピングカート機能を作成するにはどうすればよい

下のコードから別のページを取得しますか？ここ

は私のコードは次のとおりです。

ユーザーdata.ts：

import { Injectable } from '@angular/core'; 
import { Events, LocalStorage, Storage } from 'ionic-angular'; 

@Injectable() 
export class UserData { 
    _cart = []; 
    HAS_LOGGED_IN = 'hasLoggedIn'; 
    storage = new Storage(LocalStorage); 

    constructor(public events: Events) {} 

    hasItem(item) { 
    return (this._cart.indexOf(item) > -1); 
    } 

    addToCart(item) { 
    this._cart.push(item); 
    } 

    removeFromCart(item) { 
    let index = this._cart.indexOf(item); 
    //item.checked=false; 
    if (index > -1) { 
     this._cart.splice(index, 1); 
    } 
    } 

    clearCart(){ 
    this._cart = []; 
    } 

    indexOfItem(item) { 
    return this._cart.indexOf(item); 
    } 

    countOfCart() { 
    return this._cart.length; 
    } 

    login(name) { 
    this.storage.set(this.HAS_LOGGED_IN, true); 
    this.setUsername(name); 
    this.events.publish('user:login'); 
    } 

    signup() { 
    this.storage.set(this.HAS_LOGGED_IN, true); 
    this.events.publish('user:signup'); 
    } 

    logout() { 
    this.storage.remove(this.HAS_LOGGED_IN); 
    this.storage.remove('username'); 
    this.events.publish('user:logout'); 
    } 

    setUsername(username) { 
    this.storage.set('username', username); 
    } 
    getUsername() { 
    return this.storage.get('username').then((value) => { 
     return value; 
    }); 
    } 

    // return a promise 
    hasLoggedIn() { 
    return this.storage.get(this.HAS_LOGGED_IN).then((value) => { 
     return value; 
    }); 
    } 
} 

Answer 1

あなたのコードはUserDataクラスの同じインスタンスを使用するために、右のようです、しかし、それらを共有する必要がある最上位コンポーネントのプロバイダ配列に含める必要があります。

これはどういう意味ですか？あなたがPage1のプロバイダ配列にUserDataクラスを含めると、そのクラスの新しいインスタンスがページに挿入されます。問題は、Page2のプロバイダ配列にもそれを含めると、UserClassの新しい（そして別の）インスタンスもそのページに挿入されるということです。したがって、Page1のカートに物を追加するインスタンスは、Page2のカートのコンテンツを読むために使用するインスタンスとは異なります。だから、が空のようです。です。

あなたはアプリケーション全体でクラスの同じインスタンスを使用することができるようにしたい場合は、アプリの最上位コンポーネントに含める必要があります。そのようにすることで

@Component({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [UserData] 
}) 

、同じクラスのインスタンスはアプリケーション全体で使用されます。