如何停止加载器/微调器，直到所有http响应在angular中完成

我已创建loaderInterceptor以显示/隐藏微调器。 我有一个页面，其中多个HTTP调用将从API获取数据，在调用期间，我显示微调器，在HTTP请求调用完成时隐藏微调器

问题：在多个Http调用微调器之间，未按预期工作意味着在微调器中发现一些闪烁问题（显示/隐藏……n）

我的要求是如何在第一次HTTP调用时显示微调器，并在所有HTTP调用完成时隐藏微调器

这是我的加载器拦截器代码

@Injectable()
export class MyLoaderInterceptor implements HttpInterceptor {
    private requests = 0;
    removeloaderTime: any;

    constructor(private loaderService: LoaderService) { }
    private stop = ((req: any): void => {
        this.removeloaderTime = setTimeout(() => {
            if (this.requests > 0) {
                this.requests--;
            }

            if (this.requests === 0) {
                // Hide Loader
                // loaderService.hide()
                clearTimeout(this.removeloaderTime);
            }
        }, 2000);
    })

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        this.requests++
        // Show Loader
        // loaderService.show()
        return new Observable(observer => {
            const subscription = next.handle(req)
                .subscribe(
                    event => {
                        if (event instanceof HttpResponse) {
                            this.stop(req);
                            observer.next(event);
                        }
                    },
                    err => {
                        this.stop(req);
                        observer.error(err);
                    },
                    () => {
                        this.stop(req);
                        observer.complete();
                    });
            return () => {
                this.stop(req);
                subscription.unsubscribe();
            };
        });
    }
}

@Injectable（）
导出类MyLoaderInterceptor实现HttpInterceptor{
私人请求=0；
移除时间：任何；
构造函数（私有loaderService:loaderService）{}
专用停止=（（请求：任何）：无效=>{
this.removeloaderTime=setTimeout（（）=>{
如果（this.requests>0）{
本文件要求--；
}
if（this.requests==0）{
//隐藏装载机
//loaderService.hide（）
clearTimeout（此.removeloaderTime）；
}
}, 2000);
})
截取（req:HttpRequest，next:HttpHandler）：可观察{
这是我的要求++
//显示加载器
//loaderService.show（）
返回新的可观察对象（观察者=>{
const subscription=next.handle（请求）
.订阅(
事件=>{
if（HttpResponse的事件实例）{
这个。停止（req）；
观察员：下一个（事件）；
}
},
错误=>{
这个。停止（req）；
观察者错误（err）；
},
() => {
这个。停止（req）；
observer.complete（）；
});
return（）=>{
这个。停止（req）；
订阅。取消订阅（）；
};
});
}
}

假设您的

loaderService

如下所示：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  constructor() {}

  isLoading = new Subject<boolean>();
  show() {
    this.isLoading.next(true);
  }
  hide() {
    this.isLoading.next(false);
  }
}

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoadingService } from '../utils/loading.service';
@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  constructor(public loaderService: LoadingService) {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.show();
    return next.handle(req).pipe(finalize(() => this.loaderService.hide()));
  }
}

---

谢谢你的回答，但是这个解决方案和我在上面代码中提到的解决方案对于多个HTTP请求有一些闪烁（显示和隐藏…）的加载问题。这对于单个Http请求很好，但对于多个Http请求却不行。我相信finalize（）可以处理多个Http请求，但如果将可观测值转换为承诺，它将不起作用。您也可以检查这个问题：我也使用了相同的代码，但它不能同时处理多个请求。因为显示/隐藏的结果是（真、假、假、真、假、假）。它应该是n对n错。有没有办法知道发出了多少请求，然后我们可以在第一次请求时显示加载器，在最后一次请求时隐藏加载器。能否提供有关组件、服务等的更多信息，以及如何调用多个web服务？请在你的问题中添加它们。