Angular 14 无关组件数据共享：Footer显示购物车数量及代码优化

1. 创建购物车共享服务 #

新建cart.service.ts，用BehaviorSubject维护购物车全局状态，让所有组件共享同一份数据，避免重复调用API：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CartItem } from './models/cart-item.model'; // 替换成你的购物车商品类型

@Injectable({
  providedIn: 'root' // 全局单例，确保所有组件用同一个服务实例
})
export class CartService {
  // 初始化购物车数据，空数组或从localStorage取缓存（可选）
  private cartItemsSubject = new BehaviorSubject<CartItem[]>([]);
  // 对外暴露只读的Observable，防止组件直接修改源数据
  public cartItems$: Observable<CartItem[]> = this.cartItemsSubject.asObservable();

  constructor() {
    // 可选：页面刷新时从localStorage恢复购物车数据
    const savedCart = localStorage.getItem('cart');
    if (savedCart) {
      this.cartItemsSubject.next(JSON.parse(savedCart));
    }
  }

  // 获取购物车商品总数的Observable
  getCartTotalCount(): Observable<number> {
    return this.cartItems$.pipe(
      map(items => items.reduce((total, item) => total + item.quantity, 0))
    );
  }

  // 更新购物车数据（添加/删除/修改数量统一走这里）
  updateCartItems(items: CartItem[]): void {
    this.cartItemsSubject.next(items);
    // 可选：同步缓存到localStorage
    localStorage.setItem('cart', JSON.stringify(items));
  }

  // 从API加载购物车数据（仅在需要时调用一次）
  loadCartFromApi(): void {
    // 替换成你的实际API请求逻辑
    this.yourApiService.getCart().subscribe({
      next: (cartData) => {
        this.updateCartItems(cartData.items);
      },
      error: (err) => {
        console.error('加载购物车失败:', err);
      }
    });
  }
}

2. 在Footer组件中订阅数据 #

不用硬编码数量，直接通过服务订阅实时更新的总数：

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

@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent {
  // 直接获取总数的Observable，交给模板的async管道处理
  cartCount$ = this.cartService.getCartTotalCount();

  constructor(private cartService: CartService) {}
}

Footer模板里用async管道自动订阅/销毁，避免内存泄漏：

<div class="cart-icon">
  <span>购物车</span>
  <span class="badge">{{ cartCount$ | async }}</span>
</div>

3. 优化cart.page.ts代码 #

将数据维护逻辑移到服务，组件只负责UI展示和交互，符合单一职责原则：

import { Component, OnInit } from '@angular/core';
import { CartService } from '../services/cart.service';
import { CartItem } from '../models/cart-item.model';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.page.html'
})
export class CartPage implements OnInit {
  // 直接订阅服务的购物车数据Observable
  cartItems$ = this.cartService.cartItems$;

  constructor(private cartService: CartService) {}

  ngOnInit(): void {
    // 首次加载时，若服务无数据则调用API
    const currentItems = this.cartService['cartItemsSubject'].value;
    if (currentItems.length === 0) {
      this.cartService.loadCartFromApi();
    }
  }

  // 修改商品数量
  updateItemQuantity(item: CartItem, newQuantity: number): void {
    const updatedItems = this.cartService['cartItemsSubject'].value.map(i => 
      i.id === item.id ? {...i, quantity: newQuantity} : i
    );
    this.cartService.updateCartItems(updatedItems);
  }

  // 删除商品
  removeItem(itemId: number): void {
    const updatedItems = this.cartService['cartItemsSubject'].value.filter(i => i.id !== itemId);
    this.cartService.updateCartItems(updatedItems);
  }
}

核心优化点 #

• 所有购物车逻辑集中在服务，组件只处理UI，代码更易维护
• 用async管道替代手动订阅，自动处理内存泄漏
• 可选加入localStorage缓存，页面刷新后数据不丢失
• 仅在首次需要时调用一次API，所有组件共享同一份数据，避免重复请求

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