Question

我正在我的有角项目中使用HTTP拦截器显示一个加载栏，每当HTTP请求发送到服务时，该加载栏就会显示加载器。

loader.service.ts

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

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

  isLoading = new Subject<boolean>();

  constructor() { }

  show() {

    this.isLoading.next(true);
  }

  hide() {

    this.isLoading.next(false);
  }

}

loader-interceptor.ts

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

import { LoaderService } from '../services/loader.service';

@Injectable()
export class LoaderInterceptorService implements HttpInterceptor {

  constructor(private loaderService: LoaderService) { }

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

    this.loaderService.show();
    return next.handle(request).pipe( finalize( () => this.loaderService.hide()) );
  }

}

问题是加载器在加载数据之前隐藏。尤其是在有大量数据的情况下，会发生这种情况。我希望加载程序不要隐藏，除非所有请求都已解决，以便用户无法与表单等交互，除非加载了数据。加载器HTML使用覆盖CSS来阻止用户与表单进行交互，直到数据到达为止。

在另一个项目中，当我订阅每个组件中的服务方法时，我曾经在服务调用中调用过这些hide / show方法。我想避免这种情况，因为这需要我在每个组件中一次又一次地添加此代码。

任何解决此问题的方法吗？

PS： 当不同组件中同时存在多个HTTP请求时，处理加载程序是否有问题？

Answer 1

您应该在响应时隐藏加载程序：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loaderService.show();
    return next.handle(req).pipe(map(event => {
        if (event instanceof HttpResponse) {
           this.loaderService.hide();
        }         
        return event;
    }));
}

Answer 2

由于多次异步API调用，我也面临同样的问题。但是我写了不同的逻辑。所以想在这里分享，也许会对某人有所帮助。

我希望您已经创建了一个加载器组件，用于预订isLoading状态。

因此在该组件中只需创建一个变量

showLoader: boolean[] = [];

在订户内部，而不是分配true / false值，而只是将推或pop操作放入布尔数组（下面的代码）。

，在您的HTML中，您可以通过检查数组的长度来显示/隐藏加载程序例如 this.showLoader.length

this.LoaderService.isLoading.subscribe((val: boolean) => {
      if (val){
          this.showLoader.push(val);
        } else {
          this.showLoader.pop();
        }
    })

谢谢。

加载程序拦截器会在获得角度响应之前

2 个答案: