Httpinterceptor加载屏幕

Question

我有一个http拦截器，它可以在处理http请求时打开和关闭加载覆盖。它通过激活在app.component.ts中订阅共享服务来实现这一点，这实际上切换了css。

问题是，当请求进出时，一个请求的overlay off操作可能会关闭加载屏幕，而另一个请求仍在进行。我理解为什么会发生这种情况，但我真的想不出一个方法来解决这个问题。

Answer 1

要做到这一点，一种简单的方法是使用counter跟踪正在等待处理的请求的数量。

当执行请求时，增加计数器，当HttpResponse类型的响应到达时，减少计数器。

当计数器达到0时，移除overly，否则保留它，直到它达到值0为止。

Ps:您可以以链接拦截器的完整代码为例。

Answer 2

您可以使用数组来保存“正在运行的作业”。您的每个组件、服务可观察值都可以作为唯一的字符串"key“添加到服务中的数组中。

.
.
.
runningObservables: string[] = []
.
.
.
private addObservable(name: string) {
    this.runningObservables.push(name);
  }

  private removeObservable(name: string) {
    const index = this.runningObservables.indexOf(name);
    if (index > -1) {
      this.runningObservables.splice(index, 1);
    }
  }

然后在你的组件中使用类似的东西。

<app-spinner [isShown]="runningObservables.length > 0"></app-spinner>

在subscrive/complete方法中添加和删除条目。

可观察性的简化版本。

this.addObservable('getChangeRequestTypes');
    this.changeRequestsService.getChangeRequestTypes()
      .subscribe(
        db => {
          this.removeObservable('getChangeRequestTypes');
          this.changeRequestTypes = db;
        },
        error => console.log(error),
        () => { });