嘿，我来帮你搞定这个购物车数量累加的需求！在Angular里处理这种跨组件的状态（比如购物车数量），最靠谱的方式是用**服务（Service）**来统一管理，这样不管是商品详情页、导航栏的购物车图标，都能拿到一致的数量。下面一步步来实现：

1. 创建购物车服务（CartService） #

首先生成一个服务来维护购物车的状态，这里我们会处理数量累加，同时结合SessionStorage做持久化，避免刷新页面丢失数据：

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

@Injectable({
  providedIn: 'root' // Angular 4+ 可用该方式全局提供服务，也可在模块中声明
})
export class CartService {
  private cartQuantityKey = 'cart_total_quantity';

  constructor() { }

  // 获取当前购物车总数量
  getCartQuantity(): number {
    const storedQty = sessionStorage.getItem(this.cartQuantityKey);
    return storedQty ? parseInt(storedQty, 10) : 0;
  }

  // 添加商品数量（核心累加逻辑）
  addToCart(quantity: number): void {
    const currentQty = this.getCartQuantity();
    const newQty = currentQty + quantity;
    sessionStorage.setItem(this.cartQuantityKey, newQty.toString());
    // 如果需要实时通知其他组件数量变化，可添加Subject
    // this.quantityUpdated.next(newQty);
  }
}

2. 在商品添加组件中使用服务 #

结合你提供的代码片段，我们在添加商品的组件里注入购物车服务，调用addToCart方法实现累加：

import { Component, EventEmitter, Output } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { SessionStorageService } from 'angular-web-storage';
import { CartService } from './path/to/cart.service'; // 替换为你的服务实际路径

@Component({
  selector: 'app-product-add',
  templateUrl: './product-add.component.html',
  styleUrls: ['./product-add.component.css']
})
export class ProductAddComponent {
  @Output() cartUpdated = new EventEmitter<number>();
  addQuantity: number = 5; // 假设这是用户输入的新添加数量

  constructor(
    private router: Router,
    private http: HttpClient,
    private sessionStorage: SessionStorageService,
    private cartService: CartService // 注入购物车服务
  ) { }

  // 点击"添加到购物车"的触发方法
  onAddToCart(): void {
    // 调用服务完成数量累加
    this.cartService.addToCart(this.addQuantity);
    // 若需通知父组件更新数据，可发射事件
    const newQty = this.cartService.getCartQuantity();
    this.cartUpdated.emit(newQty);
    // 这里还可添加后端请求，比如记录添加行为到服务器
    // this.http.post('/api/cart/add', { quantity: this.addQuantity }).subscribe(...);
  }
}

3. 在购物车/导航组件中显示实时数量 #

比如在导航栏的购物车图标上展示数量，只需注入服务并获取数值即可：

import { Component } from '@angular/core';
import { CartService } from './path/to/cart.service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html'
})
export class NavbarComponent {
  cartQuantity: number = 0;

  constructor(private cartService: CartService) {
    // 初始化时获取当前购物车数量
    this.cartQuantity = this.cartService.getCartQuantity();
  }

  // 若需实时监听数量变化，可在ngOnInit中订阅服务的Subject（需先在服务中配置）
  // ngOnInit(): void {
  //   this.cartService.quantityUpdated.subscribe(qty => {
  //     this.cartQuantity = qty;
  //   });
  // }
}

对应的模板代码可以这样写：

<div class="cart-icon">
  购物车: {{ cartQuantity }} 件
</div>

关键逻辑说明 #

• 状态统一管理：用服务维护购物车数量，避免多个组件各自维护状态导致数据不一致。
• 持久化存储：借助sessionStorage保存数量，刷新页面后数据不会丢失；如果需要跨标签页或长期保存，可替换为localStorage。
• 核心累加逻辑：addToCart方法先获取当前已有的数量，加上新添加的数量，再将结果存回存储，这就是你需要的"5+5=10"的实现核心。

如果你的项目中是维护完整的购物车商品列表（而非单纯总数量），逻辑类似：先找到对应商品，累加其数量，再更新列表和存储即可。

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