Ionic 2 Сохранить и получить товар из корзины LocalStorage

я создал ionic 2 application с функцией корзины покупок, но моя проблема, когда я save the item in the cart перехожу на другую страницу и открываю the cart в этом случае корзина пуста

Мой вопрос:

Как я могу создать функцию корзины покупок и получить ее на другой странице с помощью приведенного ниже кода?

вот мой код:

user-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;
    });
  }
}

person Mahmoud Ismail    schedule 16.08.2016    source источник


Ответы (1)


Ваш код кажется правильным, но чтобы использовать тот же экземпляр класса UserData, вы должны включить его в массив поставщиков самого верхнего компонента, где они должны быть общими.

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

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

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

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

person sebaferreras    schedule 16.08.2016
comment
Ага, все верно на все 100%, спасибо за ответ :). - person Mahmoud Ismail; 16.08.2016
comment
Рад, что смог помочь :) - person sebaferreras; 16.08.2016