Angular使用Service和Subject传递购物车数组时数据不实时生效问题

问题根因 #

你使用的普通Subject的核心特性是仅向订阅发生之后产生的新事件推送数据。未进入购物车页面时，购物车组件还未初始化，没有执行ngOnInit中的订阅逻辑，这段时间在商品页触发的next事件都会直接丢失。等你进入购物车页面完成订阅后，后续的加购事件才能正常被接收，这就是你碰到异常的核心原因。

解决方案 #

把服务中的普通Subject替换为BehaviorSubject即可。BehaviorSubject会持久化存储最新的一次推送值，只要有新订阅产生，就会主动把最新值推给订阅者，刚好适配购物车状态需要持久保存的场景。

第一步：修改服务代码 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs'; // 替换导入的Subject

@Injectable({
  providedIn: 'root'
})
export class CartDataService {
  // 初始化传入空数组作为默认值，指定泛型为Item[]避免any类型问题
  private _cartData = new BehaviorSubject<Item[]>([]);
  myCartData$ = this._cartData.asObservable()
  constructor() { }
  sendCartData(cartData:Item[]){
    this._cartData.next(cartData);
  }
}

可选优化：统一把购物车数据存在服务端 #

你当前把addedToCart数组存在商品组件本地，如果商品组件被路由销毁（比如切换到其他非商品/购物车页面），本地数组会被清空，之前的加购数据就会丢失，建议把购物车数据统一存在服务里管理：

补充服务逻辑

// CartDataService 追加逻辑
private cartList: Item[] = []; // 服务内持久化存储购物车列表

addItemToCart(product: Item) {
  this.cartList.push(product);
  this._cartData.next([...this.cartList]); // 传递数组副本，避免引用导致的意外修改
}

clearCart() {
  this.cartList = [];
  this._cartData.next([]);
}

修改商品组件逻辑

export class ProductComponent implements OnInit {
  productList: Item[] = [];
  // 删除本地的addedToCart数组
  constructor(private data: DataService, private cartDataService:CartDataService) { }

  addToCart(product:Item){
    // 直接调用服务的加购方法即可
    this.cartDataService.addItemToCart(product)
  }
}

购物车组件的订阅逻辑不需要做任何修改，改完即可实现任意时间进入购物车页都能拿到当前最新的加购数据。

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