Question

我使用购物车功能创建了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;
    });
  }
}

Answer 1

您的代码似乎是正确的，但是为了使用 UserData类的相同实例，您应该将它包含在必须共享它们的最顶层组件的providers数组中< / strong>即可。

这是什么意思？好吧，如果在Page1的providers数组中包含UserData类，则会在页面中注入该类的新实例。问题是，如果您还将它包含在Page2的provider数组中，那么UserClass的新（和不同）实例也将被注入该页面。因此，在Page1中向购物车添加内容的实例与用于在Page2中读取购物车内容的实例不同。这就是为什么它似乎为空。

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

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

通过这样做，该类的实例将在整个应用程序中使用。

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

1 个答案: