離子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的providers數組中包含UserData類，則該類的新實例將被注入到頁面中。問題是，如果您還將其包含在Page2的提供程序數組中，那麼UserClass的新（不同）實例也將被注入該頁面。因此，您在Page1中將商品添加到購物車的實例與您在第2頁中用於讀取購物車內容的實例會有所不同。這就是爲什麼它似乎是空。

如果你希望能夠使用類的同一個實例，在整個應用程序，你應該將其包含在應用程序的最上面的成分：

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

通過這樣做，同樣的實例將在整個應用程序中使用。