Angular 组件和后端服务之间的通信

Question

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

1. navmenu 组件上的购物车图标 - 它显示了购物车中商品的数量。
2. 购物车摘要页面 - 显示购物车中的商品，并允许您使用数量组件 (3) 增加/减少商品的数量或将其从购物车中完全删除。
3. 数量对象。这附加到产品页面以及购物车中的行项目。对于组件所在的产品页面，它可以增加或减少购物车中的商品数量。

购物车服务的公开方法有：

   //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> { ... }

由于服务与 API 分离并分别注入到每个组件（产品组件、数量组件和导航菜单组件）中，因此单击数量组件上的加号（）或减号（-）按钮正在更新数量对象，但导航菜单不会随着数字的变化而更新。

例如，我的购物车组件上有这个，

<ng-container *ngIf="cart$ | async as cart">
  <div class="card">
    <div class="card-body">
      <h6 class="card-subtitle card-mb-4 card-tb-4 text-muted">
         You have {{cart.itemCount}} items in your cart.

在 .ts 文件中使用以下代码

   ngOnInit() {
      this.getCart();
   }

   async getCart() {
      this.cart$ = await this.cartSvc.getCartItems();
   }

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>

使用 .ts 文件中的此代码，我的意图是当我单击产品上的 + 以将其添加到购物车时，徽章药丸中的商品数量应该会增加。

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

我通过 Observable 作为返回结果在我的所有购物车函数中更新数量组件和产品组件中的局部变量 - 这导致它们正确更新和重新渲染，但更新不会冒泡影响导航菜单，所以我可以在那里更新数量的唯一方法是刷新页面。

为什么当我将商品添加到购物车时，购物车（我订阅的 observable）不会更新？原谅我的无知，我是 Angular 的新手，仍然试图掌握它的所有功能。

提前致谢！

Answer 1

您的服务应该有一个购物车的行为主题，然后服务上的方法应该更新购物车中的数据。您不应该从更新方法返回 observables。

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$;