header 共享组件上的购物车数量未从 Angular 10 中的另一个组件更新

Question

我想要没有。当我单击 'Add to cart' 按钮时，header 组件上的购物车图标上的项目数会增加。但只有当我刷新页面时才有效。

我正在使用购物车服务来存储全局数据，然后在 header 组件上访问相同的数据。我确实在 init 上订阅了主题行为。请查看这些代码片段：

我的 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);
  }
}

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

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

这是我的 'Add to cart' 按钮的作用：

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

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

如果您已通过 module/component.

注册它，请确保将其从任何 NgModule/Component 的 providers 数组中删除

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

header 共享组件上的购物车数量未从 Angular 10 中的另一个组件更新

Cart quantity on header shared component is not updating from another component in Angular 10

angular-services

angular

angular10