Angular17中BehaviourSubject无法更新组件模板问题求助

核心问题原因 #

1. 数组引用未更新：你在CartService的add方法中直接修改了BehaviorSubject持有的原数组（currentCart是原数组的引用），执行next(currentCart)时，BehaviorSubject推送的是同一个数组引用。Angular的变更检测依赖引用变化来感知数据更新，同一个引用会被认为数据未发生变化，因此Header组件模板不会刷新。
2. 订阅方式不规范：Header组件中订阅cart$时，没有使用回调返回的最新数据，而是再次调用cart$.value，虽然逻辑上能拿到值，但结合数组引用未变更的问题，无法触发组件的变更检测。

修复步骤 #

1. 修复CartService的add方法，创建新的数组/对象引用

修改add方法，每次更新购物车时创建新的数组和对象引用，确保BehaviorSubject推送全新的数据：

add(cartProd: CartProduct) {
  // 复制原数组，生成新引用
  const currentCart: CartProduct[] = [...this.cartSubject.getValue()];
  const ind = currentCart.findIndex(x => x.id === cartProd.id);
  
  if (ind !== -1) {
    // 修改商品数量时，创建新的商品对象引用
    currentCart[ind] = {
      ...currentCart[ind],
      num: currentCart[ind].num + cartProd.num
    };
  } else {
    currentCart.push(cartProd);
  }
  
  this.cartSubject.next(currentCart);
}

2. 优化Header组件的订阅方式（推荐使用async管道）

Angular的async管道会自动管理Observable的订阅和取消订阅，同时会触发组件的变更检测，是处理这类场景的最佳实践：

import { Component } from '@angular/core';
import { CartService } from './cart.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-header',
  template: `
    <ul>
      @for (product of cart$ | async; track product.id) {
      <li>
        {{ product.name }} (x{{ product.num }})
      </li>
      }
    </ul>
  `,
  styleUrls: ['./header.component.css'],
})
export class HeaderComponent {
  cart$: Observable<CartProduct[]>;

  constructor(private cartService: CartService) {
    this.cart$ = this.cartService.cart$;
  }
}

如果坚持手动订阅，修正为使用回调参数的正确写法：

ngOnInit() {
  this.cartService.cart$.subscribe(updatedCart => {
    this.cart = updatedCart;
  });
}

为什么之前导航后能显示？ #

导航操作会触发Angular的路由变更，此时框架会运行全局的变更检测，遍历组件树检查数据变化，因此能感知到购物车数组的内容变化并刷新模板。而点击按钮时，仅修改了数组内部元素但未改变引用，局部变更检测未触发，导致模板未更新。

内容的提问来源于stack exchange，提问作者Iñigo Gorosabel