ionique 2 Enregistrer et récupérer Panier Article LocalStorage

Question

j'ai créer un ionic 2 application avec panier fonction, mais mon problème quand je save the item in the cart et aller à la page autre et the cart ouverte dans ce cas, le panier est vide

Ma question:

Comment puis-je créer une fonctionnalité de panier et récupérer dans une autre page de mon code ci-dessous?

voici mon code:

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

Votre code semble avoir raison, mais pour utiliser le même instance de la classe UserData, vous devez l'inclure dans le tableau des fournisseurs du composant le plus haut où ils doivent être partagés.

Qu'est-ce que cela signifie? Eh bien, si vous incluez la classe UserData dans le tableau des fournisseurs de la Page1, une nouvelle instance de cette classe sera injectée dans votre page. Le problème est que si vous l'incluez également dans votre tableau de fournisseurs de votre Page2, une nouvelle instance (et différente) du UserClass sera également injectée dans cette page. Ainsi, l'instance dans laquelle vous ajoutez des éléments à votre panier dans la Page1, sera différente de l'instance que vous utilisez pour lire le contenu de votre panier dans la Page2. C'est pourquoi il semble être vide.

Si vous voulez être en mesure d'utiliser la même instance de la classe dans l'application entière, vous devez inclure dans le top-composant le plus de l'application:

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

En faisant cela, le même instance de la classe sera utilisé dans l'ensemble de l'application.