Angular 加载器和 RxJS 结合最新

Question

您好，我正在开发 Angular 应用程序。我想添加一个全局加载器，每当我从 api 获取一些数据时就会显示该加载器。我有 ngrx

fetchDataAction

，此操作将商店中的加载属性设置为 true，还有两个附加操作

fetchDataActionSuccess

和

fetchDataActionFailure

，这两个操作在一切正常时设置数据，或者在出现问题时显示错误错误的是，他们还将商店中的loading属性设置为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

，组合所有加载选择器，如果其中任何一个为 true，则返回。

Answer 2

标题：在 Angular 15 中实现自定义加载器

说明： 我正在开发一个 Angular 15 项目，并实现了一个自定义加载器来管理 HTTP 请求。加载器被设计为拦截器并包括旋转器组件。以下是关键组件的简要概述：

LoaderInterceptor：我们创建了一个LoaderInterceptor来拦截HTTP请求和响应，使我们能够显示和隐藏加载器。

自定义微调器组件：SpinnerComponent 显示一个加载微调器，可以通过单击按钮手动触发。

Loader Service：LoaderService 跟踪活动的 API 请求并控制加载器的可见性。

我已经在问题中提供了相关的代码片段。但是，我可能需要某些方面的帮助，例如优化加载程序的性能或处理特定的用例。

如果有人有 Angular 15 中自定义加载器的经验，或者可以提供有关加载器最佳实践的见解，我们将非常感谢您的帮助。谢谢！

链接：https://gitlab.com/rooshanbaber07/loader