Блог

Я добавляю корзину покупок в заголовок моего сайта (который является общим компонентом). Он показывает количество товаров в корзине.
Я инициализирую количество корзин при входе пользователя в систему и добавляю его в localstorage как 0.

 cartCount: number = 0;
localStorage.setItem("cart_count", JSON.stringify(this.cartCount));
  

Когда количество товара изменяется, я устанавливаю его cart_count следующим образом:

  localStorage.setItem("cart_count", JSON.stringify(item.quantity));
  

Как я могу позволить ему изменять количество в моем заголовке, не обновляя страницу?

Должен ли я сделать корзину покупок в качестве нового компонента и добавить ее в заголовок, а затем обновить только этот компонент? Если да, как я могу обновить этот компонент?

Спасибо

это в значительной степени является целью общего сервиса и rxjs.

вы бы создали какую-нибудь службу корзины:

 @Injectable({providedIn: 'root'})
export class CartService {
  private cartCount = new ReplaySubject<number>(1);
  cartCount$ = this.cartCount.asObservable();
  setCartCount(count: number) {
    // encapsulate with logic to set local storage
    localStorage.setItem("cart_count", JSON.stringify(count));
    this.cartCount.next(count);
  }

  constructor() {
    // can check local storage here to initialize?
  }
}
  

затем в любое время, когда вы хотите установить новое количество, вы вводите службу и вызываете setCartCount метод, а когда вы хотите получать уведомления об обновлениях, вы вводите службу и подписываетесь на cartCount$ наблюдаемый:

 constructor(private cartService: CartService) {

  this.countSub = this.cartService.cartCount$.subscribe(
    count => {
      // this runs everytime the count changes
      this.cartCount = count;
    }
  )

  this.cartService.setCartCount(0); // init to 0?
}

ngOnDestroy() {
  this.countSub.unsubscribe(); // important to unsubscribe
}
  

вы также можете использовать асинхронный канал вместо прямой подписки:

 constructor(private cartService: CartService) {
  this.cartCount$ = this.cartService.cartCount$
}
  

и в шаблоне используйте асинхронный канал:

 {{ cartCount$ | async }}
  

То, что вы хотите, — это тема.

Для быстрого примера, что-то вроде этого:

 export class CartService {
  ...
  private cartCount = new Subject<number>();
  ...

  getCartCount(): Observable<number> {
    return this.cartCount.asObservable();
  }

  setCardCount(item: any) {
    localStorage.setItem("cart_count", JSON.stringify(item.quantity));
    this.cartCount.next(localStorage.getItem("cart_count"));
  }
...