Ионные 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, вы должны включить его в массив поставщиков самого верхнего компонента, где они должны быть разделены.

Что это значит? Ну, если вы включите класс UserData в массив поставщиков страницы, на ваш сайт будет введен новый экземпляр этого класса. Проблема в том, что если вы также включите его в свой массив поставщиков вашего сайта, на этой странице будет также введен новый (и другой) экземпляр UserClass. Таким образом, экземпляр, в котором вы добавляете вещи в свою корзину в Page1, будет отличаться от экземпляра, который вы используете для чтения содержимого вашей корзины на странице. Вот почему это пусто.

Если вы хотите, чтобы иметь возможность использовать один и тот же экземпляр класса во всем приложении, вы должны включить его в самом верхнем компоненте приложения:

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

Делая это, то же самое экземпляр класса будет использоваться во всем приложении.