在 angular8 中的电子商务网站下订单后如何重置可观察值？

Question

在我的 angular8 电子商务应用程序中，我有一个名为 shoppingWidget 的子 component，它位于名为 'header' 的父组件中。在 shoppingWidget 中，我在 icon 上显示 cart 项 count。为此，我有一个 cart.service.ts，其中我有一个像这样的 function

public getItems(): Observable<CartItem[]> {
  const itemsStream = new Observable(observer => {
    observer.next(products);
    observer.complete();
  });
  return <Observable<CartItem[]>>itemsStream;
}

借助于此，我首先在我的父组件中获取购物车商品(header)，就像这样

  constructor(private cartService: CartService) {
    this.cartService.getItems().subscribe(shoppingCartItems => this.shoppingCartItems = shoppingCartItems);

  }

然后像这样

在我的子组件 shoppingWidget 中传递 this.shoppingCartItems

<div class="main-menu-wrapper-2" fxLayout="row" fxLayoutAlign="space-between center">
     <mat-toolbar class="top-navbar top menu">
        <app-shopping-widgets [shoppingCartItems]="shoppingCartItems"></app-shopping-widgets>
     </mat-toolbar>
</div>

现在购物车运行良好。但问题是，当使用完成后在网站上下订单，所以我必须重置购物车上显示的 count，我想再次将该计数设置为 0.

我怎样才能做到这一点？

Answer 1

这里有一点：

public getItems(): Observable<CartItem[]> {
  const itemsStream = new Observable(observer => {
    observer.next(products);
    observer.complete();
  });
  return <Observable<CartItem[]>>itemsStream;
}

作为可观察对象并没有多大意义。您可以使用 return of(products) 完成同样的事情，但这对于您可以控制的流同样没有用。你需要一个主题。

private itemsSource = new BehaviorSubject(products);

public getItems(): Observable<CartItem[]> {
  return this.itemsSource.asObservable(); // this doesn't complete, must unsubscribe
}

public resetItems() {
  this.itemsSource.next([]);
}

使用主题可以让您控制可观察对象，并且您无需完成该可观察对象即可继续接收有关它的更新。

在 angular8 中的电子商务网站下订单后如何重置可观察值？

How to reset observable after placing the order in eCommerce site in angular8?

observable

typescript

angular