Angular非父子路由组件如何传递addedToCart数组到目标组件

针对两个无父子关联的路由组件共享状态的需求，最简便的实现是用Angular全局单例服务做状态托管，你项目中已经存在DataService，直接基于它扩展即可，步骤如下：

步骤1：修改DataService，定义响应式购物车状态 #

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Item } from '你的Item类型定义路径'; // 替换为实际的Item类型导入路径

@Injectable({
  providedIn: 'root' // 确保为全局单例，全应用共享同一个实例
})
export class DataService {
  // 用BehaviorSubject存储购物车数据，支持新订阅者直接获取最新值
  private addedToCartSubject = new BehaviorSubject<Item[]>([]);
  // 对外暴露只读可观察对象，避免组件直接修改源数据
  addedToCart$ = this.addedToCartSubject.asObservable();

  // 提供统一的加购更新方法
  addItemToCart(item: Item): void {
    const currentCart = this.addedToCartSubject.value;
    // 不可变更新数组，触发订阅者响应
    const updatedCart = [...currentCart, item];
    this.addedToCartSubject.next(updatedCart);
  }

  // 原有getData等业务方法保留不变
  getData() {
    // 原有逻辑不动
  }
}

步骤2：修改ProductComponent，加购时同步更新服务状态 #

export class ProductComponent implements OnInit {
  products: Item[] = [];
  addedToCart: Item[] = [];
  constructor(private data: DataService) { }

  addToCart(product:Item){
    // 调用服务方法更新全局购物车状态
    this.data.addItemToCart(product);
    // 若需保留组件本地的addedToCart数组，同步更新即可
    this.addedToCart.push(product);
  }

  ngOnInit(): void {
    this.data.getData()
    .subscribe(
      response =>{
        this.products = response
      }
    )
  }
}

步骤3：修改CartComponent，订阅服务的购物车状态 #

export class CartComponent implements OnInit {
  cartItems:Item[] | undefined;
  // 注入共享的DataService
  constructor(private data: DataService) { }

  ngOnInit(): void {
    // 订阅购物车数据，状态变化自动更新
    this.data.addedToCart$.subscribe(cart => {
      this.cartItems = cart;
    })
  }
}

方案特点 #

• 无需处理组件间的传参关联，完美适配路由组件的独立场景
• 响应式更新，ProductComponent加购后CartComponent会自动同步最新数据
• 依赖Angular原生能力，不需要引入第三方状态管理库，改造成本极低

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