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

Question

I have a backend API written in C#, and my Angular App has a service layer of angular components between this API and the visual components. 3 components in particular are using a shopping cart component service. They are:

1. A shopping cart icon on a navmenu component - it shows a count of the number of items in the cart.
2. A cart summary page - shows items in the cart and allows you to increase/decrease the qty of an item or delete it from the cart entirely using the quantity component (3).
3. Quantity object. This is attached to a product page as well as line items in the cart. It can increase or decrease the number of items in the cart for the product page the component sits on.

The exposed methods for the cart service are:

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

Because the service is detached from the API and injected into each of the components separately (product component, quantity component and navmenu component), clicking the plus() or minus (-) button on the quantity component is updating the quantity object, but the navmenu is not getting updated as the numbers change.

For instance, I have this on my cart component,

<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.

with the following code in the.ts file

   ngOnInit() {
      this.getCart();
   }

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

The navmenu component has this code in the page

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

with this code in the.ts file, my intent being that the number of items should increase in the badge-pill when I clicked the + on a product to add it to the cart.

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

I passed Observable as return results in all my cart functions to update the local variables in the quantity component and the product component - this is causing them to update and re-render properly, but the update never bubbles up to affect the navmenu, so the only way I can get the quantity there to update is to refresh the page.

Why does the cart count, an observable I am subscribing to, not update when I add items to the cart? Forgive my ignorance, I am new to Angular and still trying to get a handle on all its features.

Thanks in advance!

Answer 1

Your service should have a behavior subject for the cart and then the methods on the service should be updating the data in the cart. You should not be returning observables from the update methods.

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: [] });
}

and in your component

cart$ = this.cartSvc.cart$;