Ionic 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 class 的 相同实例，您应该将其包含在顶部的提供程序数组中-大多数必须共享的组件。

这是什么意思？那么，如果您在 Page1 的提供程序数组中包含 UserData class，那么该 class 的一个新实例将被注入您的页面。问题是，如果您还将它包含在您的 Page2 的提供程序数组中，那么 UserClass 的一个新的（不同的）实例也会被注入到该页面中。因此，您在 Page1 中将东西添加到购物车的实例将不同于您在 Page2 中用于读取购物车内容的实例。这就是为什么它看起来是 empty.

如果您希望能够在整个应用中使用 class 的同一个实例，您应该将其包含在应用的最顶层组件中：

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

通过这样做，class 的相同实例将用于整个应用程序。

Ionic 2 保存和检索购物车项目 LocalStorage

Ionic 2 Save and Retrieve Shopping Cart item LocalStorage

angular

typescript

ionic2

ionic3