Angular

Question

目前我有一个订单列表组件，我在其中显示了一堆订单。这些订单是从 API 请求的，并且每隔 2 分钟更新一次，如下所示：

this.subscription = timer(0, 120 * 1000).subscribe(() => {
    this.getInitialPendingTabOrders();
    this.getInitialDeliveredTabOrders();
    this.getInitialCancelledTabOrders();
});

效果很好。但是，我还实现了一个搜索栏，我可以在其中过滤不同的订单。我想要的是上面代码中的自动更新功能 not 在搜索处于活动状态时应用（现在搜索结果在订阅触发时重置）。

当我在搜索栏上下文中时，有没有办法让我暂时停止订阅？

此外，值得注意的是搜索栏是订单组件的子组件。

提前致谢。

Answer 1

我想到的最简单的方法是在您的搜索处于活动状态时过滤掉计时器的排放：

this.subscription = timer(0, 120 * 1000).pipe(filter(() => isSearchActive )).subscribe(() => {
    this.getInitialPendingTabOrders();
    this.getInitialDeliveredTabOrders();
    this.getInitialCancelledTabOrders();
});

在你的父组件中你可以

<child-search (searchActive)="isSearchActive = true" ></child-search>

Angular - 在搜索栏输入时停止可观察计时器

Angular - Stop observable timer on search bar input

observable

typescript