Связь между угловыми компонентами и внутренними сервисами

Question

У меня есть бэкэнд API, написанный на C #, и у моего Angular App есть сервисный уровень угловых компонентов между этим 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 и вводится в каждый из компонентов по отдельности (компонент продукта, компонент количества и компонент navmenu), нажатие кнопки плюс () или минус (-) на компоненте количества обновляет объект количества, но навигационное менюне обновляется при изменении чисел.

Например, у меня есть это на моем компоненте корзины,

<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 в качестве возвращаемых результатов во всех функциях моей корзины, чтобы обновить локальные переменные в компоненте количества и компоненте продукта - это заставляет их корректно обновляться и повторно отображаться, но обновлениеникогда не всплывает, чтобы повлиять на navmenu, поэтому единственный способ получить количество для обновления - это обновить страницу.

Почему количество корзин, наблюдаемое мной, на которое я подписываюсь, не обновляется при добавлениитовары в корзину? Простите за мое невежество, я новичок в Angular и все еще пытаюсь разобраться во всех его функциях.

Заранее спасибо!

Answer 1

Ваш сервис должен иметь тему поведения для корзины, а затем методы сервиса должны обновлять данные в корзине. Вы не должны возвращать наблюдаемые из методов обновления.

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