Javascript 角度组件和后端服务之间的通信

我有一个用C#编写的后端API，我的Angular应用程序在这个API和可视化组件之间有一个由Angular组件组成的服务层。特别是3个组件正在使用购物车组件服务。它们是：

navmenu组件上的购物车图标-它显示购物车中物品数量的计数

购物车摘要页面-显示购物车中的项目，并允许您增加/减少项目的数量，或完全使用数量组件（3）将其从购物车中删除

数量对象。这将附加到产品页面以及购物车中的行项目。对于组件所在的产品页面，它可以增加或减少购物车中的项目数

cart服务的公开方法有：

   //Add item to cart or increment qty of item by 1
   addToCart(product: Product): Observable<ShoppingCart> { ... }

   //Decrement qty of item by 1 or delete if qty = 0
   removeFromCart(product: Product): Observable<ShoppingCart>{.... }

   //Get all items in cart
   getCartItems(): Observable<ShoppingCart>{ ...}

   // Delete all items in cart
   async clearCart(): Promise<Observable<ShoppingCart>>{ ... }

   // Delete entire cart
   async removeCart(): Promise<void> { ... }

navmenu组件在页面中有此代码

        <li class="nav-item">
          <a class="nav-link" routerLink="/cart">
            <span class='fa fa-shopping-cart'></span>
            <span *ngIf="cart$ | async as cart">
            <span class="badge badge-warning badge-pill" *ngIf="cart.itemCount">{{ cart.itemCount }}</span>
            </span>
          </a>
        </li>

我在我的所有购物车函数中传递了可观察的返回结果，以更新quantity组件和product组件中的局部变量-这会导致它们正确地更新和重新呈现，但更新不会冒泡影响navmenu，因此我可以获得要更新的数量的唯一方法是刷新页面

当我向购物车添加物品时，购物车计数（我订阅的可观察到的）为什么不更新？请原谅我的无知，我是一个新的角度，仍然试图得到它的所有功能处理

---

提前谢谢

您的服务应该具有购物车的行为主题，然后服务上的方法应该更新购物车中的数据。您不应该从update方法返回可观测值

cart$ = new BehaviorSubject<ShoppingCart>({ products: [] });

addToCart(product: Product) {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: [ ...cart.products, product] });
}

removeFromCart(product: Product) {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: cart.products.filter(p => p.id !== product.id) });
}

clearCart() {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: [] });
}

---

你为什么把承诺和观察混为一谈？你也不应该使用waits。看一看我为使用RxJs观测值管理角度状态而编写的库，正如我所提到的，我对这一点还不熟悉，仍在努力解决这一问题。谢谢，听起来正是我想要的。今晚我会试试，然后告诉你：）

        <li class="nav-item">
          <a class="nav-link" routerLink="/cart">
            <span class='fa fa-shopping-cart'></span>
            <span *ngIf="cart$ | async as cart">
            <span class="badge badge-warning badge-pill" *ngIf="cart.itemCount">{{ cart.itemCount }}</span>
            </span>
          </a>
        </li>

   async ngOnInit() {
      // No need to unsubscribe as only 1 instance in DOM for lifetime of application
      this.cart$ = this.cartSvc.getCartItems();
   }

cart$ = new BehaviorSubject<ShoppingCart>({ products: [] });

addToCart(product: Product) {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: [ ...cart.products, product] });
}

removeFromCart(product: Product) {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: cart.products.filter(p => p.id !== product.id) });
}

clearCart() {
  const cart = this.cart$.value;
  this.cart$.next({ ...cart, products: [] });
}

cart$ = this.cartSvc.cart$;