html - 如何从Angular9的两个不同选项卡中打开的两个不同组件更新单个数组？

Question

我正在构建一个电子商务网站，我正在实现一个添加到购物车组件，该组件使用户能够将商品添加到购物车并查看购物车中的商品，我正在使用数组来跟踪添加的商品到购物车，可以通过两个组件添加项目，从主页和项目详细信息页面，单击时项目详细信息页面在新选项卡中打开，我的问题是在项目详细信息页面在新选项卡中打开后它会更新自己的本地购物车数组，它创建两个数组而不是同时更新一个。

这是我在主页和项目详细信息页面组件中包含的功能，

addToCart(item_id){
this.dataTransmit.changeId(item_id);
}

这是我在不同组件中实现的 addToCart 函数，

ngOnInit(): void {
this.dataTransmit.currentItemId.subscribe(itemID => {
  this.addToCart(itemID);
});
}

addToCart(itemID){
let itemIdStr: string;
itemIdStr = itemID.toString();
this.cartItemList.push(itemID);
for (let i of this.cartItemList){
  console.log(i);
}
}   

这是我的服务文件，

 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 @Injectable({
   providedIn: 'root'
 })

 export class DataTransmitService {
 private itemId = new BehaviorSubject('');
 currentItemId = this.itemId.asObservable();

 changeId(itemID: any) {
  this.itemId.next(itemID);
  }
  }

如何解决此问题并保留一个数组来存储在所有选项卡中选择的产品？

标签： htmlangularserviceangular-servicesangular9