Angular 使用HttpInterceptor添加加载屏幕

这是我的LoadingScreen服务：

    import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { NavigationStart, NavigationEnd, Router, NavigationCancel } from '@angular/router';

@Injectable()
export class LoadingScreenService {

  private loadingScreenEl: HTMLElement = null;
  private player: AnimationPlayer;

  private isEnabled = false;
  private isShowing = false;
  private isHiding = false;

  constructor(
    private animationBuilder: AnimationBuilder,
    @Inject(DOCUMENT) private document: any = null,
    private router: Router = null
  ) {
    if (document !== null) {
      this.loadingScreenEl = this.document.body.querySelector('#fuse-loading-screen');
    }

    if (router !== null) {
      this.router.events.subscribe((event) => {
          if (event instanceof NavigationStart) {
            setTimeout(() => {
              this.show();
            }, 0);
          }
          if (event instanceof NavigationEnd || event instanceof NavigationCancel) {
            setTimeout(() => {
              this.hide();
            }, 0);
          }
        }
      );
    }
  }

  /**
   * @param {number} wait Duration (ms) of a timeout before showing the spinner
   */
  show(wait: number = 1000) {
    if (this.isEnabled || this.isShowing) {
      return;
    }

    this.isShowing = true;
    this.player =
      this.animationBuilder
        .build([
          style({
            opacity: '0',
            zIndex : '9999'
          }),
          animate('200ms ease', style({opacity: '1'}))
        ]).create(this.loadingScreenEl);

    this.isEnabled = true;

    setTimeout(() => {
      this.player.play();

      setTimeout(() => {
        this.isShowing = false;
      }, 200);
    }, wait);

  }

  hide() {
    if (!this.isShowing
      && (!this.isEnabled || this.isHiding)) {
      return;
    }

    this.isHiding = true;
    this.player =
      this.animationBuilder
        .build([
          style({opacity: '1'}),
          animate('200ms ease', style({
            opacity: '0',
            zIndex : '-20'
          }))
        ]).create(this.loadingScreenEl);

    setTimeout(() => {
      this.isEnabled = false;
      this.player.play();

      setTimeout(() => {
        this.isHiding = false;
      }, 200);
    }, 0);
  }
}

每当我向后端发出请求时，我都会尝试使用show/hide方法

这是我到目前为止得到的结果，但我找不到一种方法来正确地将subscribeLoading（）方法放入intercept（）

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpEvent，HttpInterceptor，HttpHandler，HttpRequest}；
从“rxjs/Observable”导入{Observable}；
从“../../core/services/loading screen.service”导入{LoadingScreenService}；
@可注射（）
导出类LoadingInterceptor实现HttpInterceptor{
建造师(
专用加载屏幕服务：加载屏幕服务
) {
}
截取（req:HttpRequest，next:HttpHandler）：可观察{
}
private subscribeLoading（）：可观察{
this.loadingScreenService.show（）；
可观测常数；
可观察。订阅（（）=>{
this.loadingScreenService.hide（）；
}，err=>{
this.loadingScreenService.hide（）；
返回错误；
})；//将错误传递给其他观察者
可观测收益；
}
}

---

在我等待后端响应时，是否有一些简单的方法可以使用我的LoadingScreen服务拦截每个调用并使用所述服务的show method表单？

以下是一种在拦截器中使用您的服务的方法

在截获时，您开始显示加载程序，然后您的intecept返回请求，并使用finally运算符隐藏成功或错误时的结果

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
    constructor(
        private loadingScreenService: LoadingScreenService
    ) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loadingScreenService.show();

        return next.handle(req).pipe(finalize(() => {
            this.loadingScreenService.hide();
        }));
    }
}

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {
    constructor(
        private loadingScreenService: LoadingScreenService
    ) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this.loadingScreenService.show();

        return next.handle(req).pipe(finalize(() => {
            this.loadingScreenService.hide();
        }));
    }
}

@Injectable()
export class LoadingScreenService {
....
    private counter: number: 0;
...

show(wait: number = 1000) {
        this.counter++;
....
}

hide() {
        this.counter--;
        if (this.counter > 0) return;
...
}