Angular中使用RxJS正确刷新购物车数值的最优实现方案咨询

方案1：基于CartService内置RxJS状态流（最推荐，中小项目无额外依赖） #

Angular服务默认是单例的，直接在服务里维护购物车计数的响应式状态即可，不需要额外引入事件总线或者NgRx，是该需求最通用的标准实现：

第一步：修改CartService #

@Injectable({
  providedIn: 'root'
})
export class CartService {
  // 用BehaviorSubject存储最新的购物车数量，初始值设为0
  private cartCountSubject = new BehaviorSubject<number>(0);
  // 对外暴露只读的Observable，避免外部直接修改Subject
  public cartCount$ = this.cartCountSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 调用后端接口获取最新计数并更新全局状态
  public refreshCartCount(): void {
    this.http.get<{productsCount: number}>(`http://localhost:8000/basket/count`)
      .subscribe(res => {
        this.cartCountSubject.next(res.productsCount);
      })
  }

  // 统一把添加购物车的接口也封装在服务内，添加成功后自动刷新计数
  public addToCart(productId: string, quantity: number): Observable<any> {
    return this.http.post(`http://localhost:8000/basket/add`, {productId, quantity})
      .pipe(
        tap(() => this.refreshCartCount())
      )
  }

  // 保留原方法兼容旧逻辑
  public cartItemCount(): Observable<{productsCount: number}> {
    return this.http.get<{productsCount: number}>(`http://localhost:8000/basket/count`);
  }
}

第二步：修改NavigationCart组件 #

推荐用Angular内置的async管道自动订阅和销毁流，避免手动处理订阅产生内存泄漏：

@Component({
  selector: 'navigation-cart',
  templateUrl: './navigation-cart.component.html',
  styleUrls: ['./navigation-cart.component.scss']
})
export class NavigationCartComponent implements OnInit {
  // 直接绑定服务的Observable，在模板里用async管道消费
  public cartCount$ = this.cartService.cartCount$;

  constructor(public cartService: CartService) {}

  ngOnInit() {
    // 组件初始化时拉取一次最新的购物车数量
    this.cartService.refreshCartCount();
  }
}

对应模板代码示例：

<!-- async管道会自动订阅和销毁流，不需要手动维护变量 -->
<span>购物车({{ cartCount$ | async }})</span>

第三步：其他组件添加商品后触发更新 #

在添加商品的组件里，调用服务封装好的添加接口即可，添加成功后服务会自动更新全局购物车计数，所有订阅了cartCount$的地方都会自动同步：

// 添加商品组件的逻辑
constructor(private cartService: CartService) {}

addToCartHandler() {
  this.cartService.addToCart(this.currentProduct.id, 1).subscribe(() => {
    alert('添加成功');
  })
}

方案2：事件总线方案（思路1的实现方式） #

如果你要沿用现有EventBusService，实现逻辑如下：

1. 在添加商品的组件里，添加购物车接口调用成功后，触发refreshCartCount事件：

// 添加商品组件
constructor(private eventbus: EventBusService, private cartService: CartService) {}

addToCart() {
  this.cartService.addToCart(xxx).subscribe(() => {
    this.eventbus.emit('refreshCartCount');
  })
}

2. 在NavigationCart组件的事件监听回调里重新拉取计数：

constructor(
  public eventbus: EventBusService,
  public cartService: CartService
) {
  this.eventbus.on('refreshCartCount', () => {
    // 收到事件后重新调用接口更新计数
    this.cartService.cartItemCount().subscribe(cartCount => {
      this.cartItemsCount = cartCount.productsCount
    })
  });
}

注意：该方案只适合非常简单的小型项目，事件多了之后会很难维护，而且要注意事件监听的销毁，避免内存泄漏。

方案3：NgRx方案（思路2的可行性说明） #

该方案完全可行，适合中大型、状态逻辑复杂的项目：

1. 定义购物车相关的Action：比如LoadCartCount、LoadCartCountSuccess、AddToCartSuccess
2. 用Effect监听AddToCartSuccess和LoadCartCount动作，调用后端接口获取购物车数量，分发LoadCartCountSuccess
3. 在Reducer里接收到LoadCartCountSuccess后更新store里的购物车计数字段
4. NavigationCart组件里通过Selector订阅store里的购物车计数即可

注意：如果你是初学者且项目规模不大，不需要引入NgRx，会大幅增加代码量和学习成本，方案1已经足够满足90%的场景需求。

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