Angular 4-在每个页面的负载上显示加载器并在所有 API 请求完成后隐藏答案

【问题标题】：Angular 4- Show Loader on the load of each page and hide after all the API request is completedAngular 4-在每个页面的负载上显示加载器并在所有 API 请求完成后隐藏
【发布时间】：2019-02-16 15:27:32
【问题描述】：

我正在处理这个带有多个模块的角度项目。我试图在每个页面的负载上显示一个加载器，并且仅在该页面的所有 API 调用请求完成后才隐藏该加载器。
项目中现在发生的情况是，当加载组件时，在 onInit() 上进行了很少的 API 调用，并且在组件调用的各种服务的负载上进行了一些其他 API 调用。所以，我的问题不会仅仅通过在 onInit 被调用后立即显示加载器并在所有请求完成后隐藏它来解决。

参考这篇文章 - Angular HTTP Interceptor - Display spinner in multi-module app

我也尝试使用 Angular 拦截器，但这也没有提供完整的解决方案，因为拦截器为每个 HTTP 请求都工作，我无法一次显示和隐藏所有请求的加载器。结果将是：
显示
隐藏
显示
隐藏
显示
隐藏
如果我使用拦截器，就像这样加载单个页面。
需要一些关于我应该在这里做什么的建议吗？

【问题讨论】：

你试过使用HTTP拦截器吗？如果您的网络请求没有在不同时间显式调用，这可能会起作用。您的网络请求图是什么样的？
@nipuna777 - 就是这样，请求被称为单独的时间。我尝试了 Http Interceptor，但它只跟踪每个请求，如果我使用它，那么加载器将一直闪烁，直到所有请求都完成。我需要找到一种方法来显示加载器一次，并且只有在没有网络请求后才隐藏。
你可以增加一个计数器来保存加载请求，然后只在所有请求完成后隐藏加载屏幕？

标签： angular interceptor loader

【解决方案1】：

我不能告诉你你应该这样做的全部方式，但有一些想法可以得到它。

我会构建一个排队服务，您可以在其中添加所有请求并处理它们。该服务可以有 queueStart rxjs 主题和 queueDone。

当您想要开始处理和完成处理时，您可以从外部处理这两个主题。完成后，您订阅并停止您的微调器。在开始主题中，您调用您的微调器。在你需要的每个组件 onInit() 中执行此操作。

【讨论】：