收割台共享组件上的购物车数量没有从Angular 10中的另一个组件更新

Question

我希望当我点击"添加到购物车"按钮时，位于标题组件上的购物车图标上的项目数量会增加。但只有当我刷新页面时，同样的方法才有效。

我使用cart服务来存储全局数据，然后访问相同的头组件。我确实在初始化时订阅了主题行为。请看一下这些代码片段：

我的cart.service.ts文件：

export class CartService {
public cartItem: ICartItem[] = [];
cartItems = new BehaviorSubject<ICartItem[]>(this.cartItem);
cartItems$ = this.cartItems.asObservable();
constructor(private cookieService: CookieService) {
this.GetCartData()
}
GetCartData() {
if (this.cookieService.check('cartItems')) {
this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
} else {
this.cartItem = [];
}
this.cartItems.next(this.cartItem);
}
publishCartChange() {
this.cartItem = JSON.parse(this.cookieService.get('cartItems'));
this.cartItems.next(this.cartItem);
}
AddCartItem(item: ICartItem) {
this.cartItem.push(item);
this.cookieService.set('cartItems', JSON.stringify(this.cartItem));
this.cartItems.next(this.cartItem);
}
}

我如何在头组件上访问它：

this.cartService.publishCartChange();
this.cartItemSub = this.cartService.cartItems$.subscribe(res => {
console.log(res);
this.cartItems = res;
console.log(res);
this.cartQty = this.cartItems.length;
}); 

这就是我的"添加到购物车"按钮的作用：

addtoCart() {
let cartItem: ICartItem = {'ItemId': this.product['itemId'], 'ItemName': this.product['itemName'], price: this.product['specialPrice'], 'qty': this.qty, 'amount': this.product['specialPrice']* this.qty };
this.cartService.AddCartItem(cartItem);
}

Answer 1

是否添加了可注入属性，并指定将其注册到根注入器？这将使它成为应用程序范围内的单例，这很可能是您想要的。

如果您已经通过模块/组件注册了它，请确保从任何NgModule/Component的providers阵列中删除它。

@Injectable({ providedIn: 'root' })
export class CartService {
...
}