Angular 加载器和 RxJS 组合最新

Question

您好，我正在开发 Angular 应用程序。我想添加一个全局加载程序，每当我从 api 中获取一些数据时都会显示该加载程序。我有 ngrx fetchDataAction，此操作将商店中的加载属性设置为 true，另外两个操作 fetchDataActionSuccess 和 fetchDataActionFailure，这两个操作设置数据，如果一切正常或出现问题时显示错误，他们还将商店中的加载属性设置为 false。如上所述，我有很多不同的加载器状态和相应的操作，例如用于获取用户、书籍和订单：

用户加载
正在加载图书
订单加载中

现在我想根据这些状态显示和隐藏加载器，所以我的全局加载器组件中有以下逻辑

ngOnInit(): void {
this.loadingSubscription = combineLatest([
        this.usersFacade.usersLoading$,
        this.booksFacade.booksLoading$,
        this.ordersFacade.ordersLoading$
    ])
    .pipe(isAnyTrue())
    .subscribe(isLoading => this.loaderService.toggleLoader(isLoading))
}

userLoading$ 是 userLoading 状态的选择器。在这种特殊情况下可以使用 combineLates 运算符吗？

Answer 1

虽然使用 combineLatest 也解决了问题并且不是特别糟糕的方法，但有更好的方法可以做到这一点，即使用 createSelector 组合几个现有的选择器（比如你的门面类提供）到一个大选择器中，只要其中一个发生变化，它就会发送值。您可以查看有关如何完成此操作的示例 here。所以你可以创建一个选择器，比如globalLoading，组合所有加载选择器，如果其中任何一个为真，则return。

Angular 加载器和 RxJS 组合最新

Angular loader and RxJS combineLatest

javascript

angular

rxjs

ngrx