Angular中如何用BehaviorSubject实现购物车商品数量跨组件同步

1. 修正购物车服务（cart.service.ts）的BehaviorSubject实现 #

你当前代码里的shopingCartData未初始化，直接用来创建BehaviorSubject会引发报错。正确实现方式如下：

• 给BehaviorSubject设置合理初始值（比如0）
• 暴露公共可观察对象，供其他组件订阅
• 提供更新购物车数量的方法

修改后的cart.service.ts代码：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, EMPTY, from } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Preferences } from '@capacitor/preferences';
import { environment } from '../environments/environment';
import { ShoppingCart } from './shopping-cart';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class CartService {
  // 初始化BehaviorSubject，默认数量为0
  private cartQtySource = new BehaviorSubject<number>(0);
  // 暴露公共可观察对象，允许组件订阅数量变化
  cartQty$ = this.cartQtySource.asObservable();

  constructor(
    private httpClient: HttpClient,
    private authService: AuthService,
    private router: Router
  ) { }

  // 更新购物车数量的方法
  updateCartQty(qty: number) {
    this.cartQtySource.next(qty);
  }

  getCart() {
    return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        return this.httpClient.get<ShoppingCart>(`${environment.apiUrl}cart`, { headers, observe: 'response' });
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', { replaceUrl: true });
        }
        return EMPTY;
      }),
    );
  }
}

2. 在购物车页面（cart.page.ts）中同步数量到服务 #

当API返回购物车数据后，调用服务的updateCartQty方法传递最新数量：

修改后的cart.page.ts代码片段：

getCart() {
  this.getCartSubscription = this.cartService.getCart().subscribe(
    (data: any) => {
      const productsData = data.body.products;
      const totalProducts = data.body.total_products;
      const totalCartPrice = data.body.totals;
      
      this.products = productsData.map(product => product);
      this.totalProducts = totalProducts;
      this.totalCartPrice = totalCartPrice;
      
      // 将最新数量同步到服务
      this.cartService.updateCartQty(totalProducts);
      
      console.log('Products in cart:', data.body);
    },
    error => {
      console.log('Error', error);
    });
}

3. 在Footer组件中订阅并显示数量 #

在Footer组件中注入CartService，订阅cartQty$可观察对象，实时获取并展示数量：

Footer组件逻辑（footer.component.ts） #

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CartService } from '../services/cart.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss']
})
export class FooterComponent implements OnInit, OnDestroy {
  cartQty: number = 0;
  private cartQtySub!: Subscription;

  constructor(private cartService: CartService) { }

  ngOnInit(): void {
    // 订阅购物车数量变化
    this.cartQtySub = this.cartService.cartQty$.subscribe(qty => {
      this.cartQty = qty;
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.cartQtySub.unsubscribe();
  }
}

Footer组件模板（footer.component.html） #

<div class="cart-count">
  购物车商品数量: {{ cartQty }}
</div>

额外提示 #

• 若购物车数量在其他场景（如添加/删除商品）发生变化，只需调用cartService.updateCartQty(newQty)，Footer组件会自动更新显示
• 务必在组件销毁时取消订阅，防止内存泄漏

内容的提问来源于stack exchange，提问作者weinde