如何在 Ionic 中使购物车产品的长度在全球范围内随处使用

Question

我正在从事 Ionic 电子商务项目，我在购物车页面中添加了购物车产品长度，但我想在产品的每个页面中使用购物车产品长度。那么，我如何才能在全球范围内做到这一点。

这是我的cart.ts:

import { CheckoutPage } from './../checkout/checkout';
import { Component, ChangeDetectorRef } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, AlertController } from 'ionic-angular';
import { CartProvider } from "../../providers/cart/cart";

@IonicPage()
@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
})
export class CartPage {
 cartItems: any[] = [];
 totalAmount: number = 0;
 isCartItemLoaded: boolean = false;
 isEmptyCart: boolean = true;
 ifSize: boolean = true;
 productCount: number = 1;
  constructor(public navCtrl: NavController, public navParams: NavParams, private cartService: CartProvider, public loadingCtrl: LoadingController, private alertCtrl: AlertController, private cdr: ChangeDetectorRef) {
  }

  ionViewDidLoad() {
    console.log(cartItems.length);
  }
}

我想 cartItems.length 全局，以便我可以在每个页面中使用它。非常感谢任何帮助。

Answer 1

在这里使用 RxJs 主题:

DEMO

cart.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class CartService {
  subject = new Subject<any>();
  constructor() { }
  public setCart(cart: any) {
    this.subject.next({ cart: cart });
  }
  public getCart(): Observable<any> {
    return this.subject.asObservable();
  }
}

page1.component.ts（添加购物车）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CartService } from '../../app/cart.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class Page1 {
  cartItems: Array<any> = [];
  cartLength: number;
  constructor(public cart: CartService, public navCtrl: NavController) {}

  addCart(cartDetails) {
    this.cartItems.push(cartDetails);
    this.cart.setCart(this.cartItems);
  }
}

page2.component.ts（获得购物车）

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { CartService } from '../../app/cart.service';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class Page2 {
  cartLength: number;
  constructor(private cart: CartService, public navCtrl: NavController) {
    this.cart.getCart().subscribe(data => {
      this.cartLength = data.cart.length;
    })
  }
}

如何在 Ionic 中使购物车产品的长度在全球范围内随处使用

How to make a cart products length globally to use anywhere In Ionic

ionic-framework

angular

ionic4