如何在 4/6/7 角完成的所有 HTTP 请求上隐藏加载程序？答案

【问题标题】：How to hide loader on all HTTP request completed in angular 4/6/7?如何在 4/6/7 角完成的所有 HTTP 请求上隐藏加载程序？
【发布时间】：2019-04-25 18:07:46
【问题描述】：

我想在任何 http 请求触发器上显示加载器，并在所有 http 请求完成时隐藏。

我是 Angular 的新手，我无法找到实现它的方法。

请帮帮我！

【问题讨论】：

标签： angular angular6 angular7

【解决方案1】：

这取决于您想要执行的“加载器”类型。如果您使用 Observables 实现 HTTP 请求，您可以在同一块订阅以等待结果 - 您可以打开模式窗口（加载指示）或更新进度条。之后，使用 .then() 语句 - 关闭模式或将进度 100% 完成。

一切都取决于您和您的愿景。

Documentation: Angular Observables

同时，已经有很多类似的问题，有一些代码和进展：

【讨论】：

【解决方案2】：

嗯，要做到这一点，你必须做几件事：

使全局查询注入服务将为您的 HTTP 请求提供服务。添加计数器（每次请求都会增加，完成后会减少）

例如：

@Injectable()
export class MyHTTPService {
public query(params: AjaxQueryClass) {
        ++this.requests_counter;
        return this.http.post(this.serverURI, JSON.stringify(params), { withCredentials: true})
        .toPromise()
        .then(d => {
                --this.requests_counter;
                return d;
            })
            .catch(err => {
                console.log(err);
                return new EmptyObservable();
            });

好的，你可以使用 Observables，而不是 Promises，但这个想法应该很清楚 - 每个请求都会增加计数器，并且它会一直显示在屏幕上，直到最后一个请求完成。在每个组件中使用此服务并仅使用它进行服务器查询。

用漂亮的滚动动画制作透明叠加，并将其放入模板中的 AppComponent（主组件）中：

&lt;div id="overlay" *ngIf="counter == 0"&gt;&lt;/div&gt;

在 AppComponanet 代码中应该有这样的地方：

    public counter = 0;
    ngDoCheck() {
       this.counter = this.my_http_service.requests_counter;
    }
    constructor(private my_http_service: MyHTTPService) {}

如何为透明叠加层编写 CSS，您可以在 google 中找到。如何编写注射剂，您可以在 Angular Hero 教程中找到。

【讨论】：