小编Mar*_*sky的帖子

我从反应式编程开始，我有以下应用程序：

三个点的项目是一个<ul>标签。每次li单击某个项目时，应用程序都会使用 routerLink 附加查询字符串（/bands、 /bands?active=false 和 /bands?active=true）导航到路线。

网页中从 Bands 开始的部分（属于band-list组件）是 router-outlet 根据路由显示的内容。下面的网格是根据查询参数“active”加载的。然后，每次li单击某个项目时，网格都会重新加载。

此外，“刷新数据”按钮会重新加载网格。

我正在尝试使用反应式编程来实现以下逻辑：

• 在初始化时，band-list组件应根据active路由中的查询参数加载网格。

• 每次用户单击 a 时li，网格都应重新加载。如果在此之前单击li网格仍在加载（发出 http 请求），则应取消正在进行的 http 请求（在我看来，这就像一个switchMap运算符）。

• 如果用户单击refresh data button并且网格已完成加载其数据，则网格应该加载。但是，如果网格仍在加载其数据（在 http 请求中间），则单击不应执行任何操作，即，进程内加载数据操作应完成，并且按钮中的单击实际上会被忽略（这看起来就像exhaustMap我一样:S)

• 另外，每次执行http操作时，当http操作尚未完成时，应该显示一条消息告诉“正在加载...”，并且应该清空网格中的数据。当 http 请求完成时，“正在加载...”消息应被删除，并且数据应显示在网格中。

我在组件中实现了代码，band-list就像下一个代码块一样，但我不确定该defer运算符在我的解决方案中的使用。我使用了该defer运算符，因为如果当前请求正在使用 defer 运算符内的变量进行处理，我需要维护状态，isLoading并且还要更新此变量作为运算符中的副作用操作tap，并使用此变量作为副作用在filter运营商中。

我的问题是：根据反应式编程，这是一种很好的方法吗？我可以做得更好吗？

您可以在stackblitz' url中检查此解决方案

@Component({
    selector: 'app-band-list',
    templateUrl: 'band-list.component.html', …