如何在 Angular 7 页面加载时显示加载指示器，直到所有 api 响应？答案

【问题标题】：how to show loading indicator on page loading in angular 7 until all apis response?如何在 Angular 7 页面加载时显示加载指示器，直到所有 api 响应？
【发布时间】：2019-09-16 14:26:43
【问题描述】：

我在一个页面中有 5 个 api 调用。一些 api 需要 20 秒才能给出响应。有些需要 30 秒才能做出响应。有些需要 10 秒，所以当第一个 api 给出响应时，第一个 api 将加载指示器设置为 false。然后加载指示器消失。但其他 api 仍在工作我想显示加载指示器，直到五个 api 调用响应。你能给我一些想法来完成这项任务吗？

代码：

组件.ts

  loading = true;
  ngInit() {

  this.api1();
  this.api2();
  this.api3();
  this.api4();
  this.api5();

  }

  api1(){
  this.loading=true;
  this.apiService.api1.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
  api2(){
  this.loading=true;
  this.apiService.api2.subscribe(response => {
  loading = false;
  }, error=>{

  });

  }
  api3(){
  this.loading=true;
  this.apiService.api3.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
  api4() {
  this.loading=true;
  this.apiService.api4.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }
api5() {
  this.loading=true;
  this.apiService.api5.subscribe(response => {
  loading = false;
  }, error=>{

  });
  }

ApiService.service.ts：

     api1(): any {

      return this.http.get('apiurl');

    }
    api2(): any {

      return this.http.get('apiurl');

    }
    api3(): any {

      return this.http.get('apiurl');

    }
    api4(): any {

      return this.http.get('apiurl');

    }

    api5(): any {

      return this.http.get('apiurl');

    }

【问题讨论】：

您可能想查看文档中的操作员决策树应用程序：rxjs-dev.firebaseapp.com/operator-decision-tree

标签： javascript jquery angular css angular7

【解决方案1】：

你也可以使用 rxjs forkjoin 来做同样的事情。 Forkjoin 等待所有请求完成，并在所有 api 调用完成后返回响应。这是一个例子。

**component.ts**

isLoading: boolean;
constructor(private apiCallService: ApiSErvice) {}
ngOnInit() {
   this.isLoading = true;
   this.apiCallService.multipleApiCallFunction().subscribe(response  => {
       this.isLoading = false;
})
}


**ApiService.service.ts**

import { Observable, forkJoin } from 'rxjs';

multipleApiCallFunction() : Observable<any[]>{
 const api1 = this.http.get('apiurl-1');
 const api2 = this.http.get('apiurl-2');
 const api3 = this.http.get('apiurl-3');
 const api4 = this.http.get('apiurl-4');

  return forkJoin([api1, api2, api3, api4]);

}

【讨论】：

我们上周也做了同样的事情，很好
这是执行此操作的正确方法（为了便于阅读，我会将加载的 true 放在 tap 运算符中，并将 false 放在 finalize 块中）
@Yash Rami 伙计们感谢您的解决方案。我可以使用拦截器吗？
@Kumaresan Perumal Sir，Interceptor 用于拦截请求或响应，但这里我们有多个 api 调用，所以我们没有跟踪哪个 api 调用已完成，哪些正在等待，所以这里我们使用 fork join一样的
是的。你说的对。样板代码将会出现。我应该在需要加载=假和加载=真的地方放入角度组件。这就是我问的原因。请告诉我。

【解决方案2】：

如果您不想使用 forkJoin 或想单独控制每一个，另一种实现此目的的方法，您可以为每个 API 调用创建一个订阅变量，然后在您的 HTML 中使用 *ngIf="sub1 || sub2 || ... || sub5" 来显示和隐藏加载指示器，它会是这样的：

//declare subscriptions like so
sub1: Subscription; 

ngInit() {
  sub1 = this.api1();
  sub2 = this.api2();
  sub3 = this.api3();
  sub4 = this.api4();
  sub5 = this.api5();
}

在你的 HTML 加载栏标签中添加：

*ngIf="sub1 || sub2 || sub3 || sub4 || sub5"

【讨论】：

html 代码对所有组件都是通用的。所以这不是可行的解决方案。请告诉我任何其他想法。
您的问题中没有说明这一点，我仍然不明白为什么它不可行。 'html 代码对所有组件都是通用的'是什么意思。
假设我有另一个组件。那有五个 api 调用，你会怎么做？
据我所知，你仍然可以这样做:)
html是你的组件，如果你想要一个像你的加载布尔值这样的变量，你可以在每个api调用的订阅中检查你的其他子变量，如果其余的都是空的，那就意味着它们是完成，你可以将加载布尔值设置为 false :)

【解决方案3】：

您可以简单地使用变量来存储 API 结果，然后根据内容的存在性加载内容：

<div *ngIf = "apiResults; else elseBlock">
    ...
</div>
<ng-template #elseBlock>Loading...</ng-template>

【讨论】：

【解决方案4】：

这个问题现在好像不活跃了。但是，如果将来有人需要，我会在此处添加解决方案以显示微调器。

您可以在调用 api 时使用这个 angular 包来显示 spinner(loader)。在初始加载时显示微调器非常有帮助。您还可以使用正则表达式、方法和标头来过滤 api。

https://www.npmjs.com/package/ng-http-loader

【讨论】：