如何点击product-list组件的Add to Cart按钮更新navbar组件购物车徽章值

要实现点击「加入购物车」按钮后更新导航栏的购物车徽章值，核心是通过共享服务实现跨组件的数据同步。结合你已有的_data服务，具体操作步骤如下：

1. 改造共享服务（DataService） #

在你的_data服务中新增可观察对象，用来传递购物车数量的变化，同时在添加商品时同步更新数量：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  // 存储购物车商品列表
  private cartItems: any[] = [];
  // 用于发送数量变化的可观察对象，初始值为0
  private cartCountSubject = new BehaviorSubject<number>(0);
  // 暴露给外部订阅的公共可观察对象
  cartCount$ = this.cartCountSubject.asObservable();

  setShoppingCartList(product: any) {
    this.cartItems.push(product);
    // 发送最新的购物车数量
    this.cartCountSubject.next(this.cartItems.length);
  }

  // 页面初始化时同步当前数量用
  getCurrentCartCount(): number {
    return this.cartItems.length;
  }
}

2. 在导航栏组件中订阅数量变化 #

修改导航栏组件的TypeScript代码，订阅服务中的数量更新，实时同步cart_length：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { DataService } from '../path-to-your-data-service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.html',
  styleUrls: ['./navbar.css']
})
export class NavbarComponent implements OnInit, OnDestroy {
  cart_length: number = 0;
  // 保存订阅实例，防止内存泄漏
  private cartSubscription?: Subscription;

  constructor(private _data: DataService) {}

  ngOnInit(): void {
    // 订阅数量变化，实时更新徽章值
    this.cartSubscription = this._data.cartCount$.subscribe(count => {
      this.cart_length = count;
    });

    // 初始化时同步当前购物车数量，避免刷新后徽章显示为0
    this.cart_length = this._data.getCurrentCartCount();
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅
    this.cartSubscription?.unsubscribe();
  }
}

3. 商品列表组件无需额外修改 #

你现有的product-list.ts中的addToCart方法已经调用了this._data.setShoppingCartList(product)，只要服务中的方法正确发送了数量变化通知，导航栏的徽章值就会自动递增更新。

补充说明 #

• 用BehaviorSubject是因为它会保存当前最新值，新订阅的组件能立即拿到当前购物车数量，避免页面初始化时徽章为空。
• 组件销毁时取消订阅是Angular开发的常规操作，防止内存泄漏。

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