Angular 如何在Ionic 2中为多个请求显示LoadingController

根据Ionic文档，我可以使用以下代码加载Ionic LoadingController：

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries()
      .subscribe(res => {
        this.latestEntries = res;
        loader.dismiss();
      });

  });
}

如果我只是提出一个ajax请求，那么这很好。但我有5个请求，如果我像这样隐藏/显示加载控制器，它会导致屏幕闪烁

有没有一种方法可以让我显示loadingController，但只有在所有Ajax请求都完成后才能显示

disclose（）

---

EDIT:

请求彼此不依赖。他们是独立的。我所寻找的是一种在所有observable请求完成时得到通知的方法。这样，当所有的请求都完成时，我可以关闭LoadingController。

您可以在每个订阅中链接所有请求

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });

  loader.present().then(() => {
    this.someService.getLatestEntries1()
      .subscribe(res => {
        this.latestEntries1 = res;
        this.someService.getLatestEntries2()
          .subscribe(res => {
            this.latestEntries2 = res;
            // OTHER CALLS ...
            this.someService.getLatestEntries5()
              .subscribe(res => {
                this.latestEntries5 = res;
                loader.dismiss();
              });
          });
      });
  });
}

您使用

loader.dismise（）

的方式不太好，它会调用

someService.getLatestEntries

并立即使用dismise，您需要在承诺/订阅/可观察的返回中使用它，这样它只会在函数完成时才会消失

不要忘记在每次通话中都添加一个

onError

，因为现在是5，你不希望一个出错，然后用户会永远陷入困境。因此，添加它并在每个

onError

中添加一个

loader.disclose（）

希望这有帮助：）
您不应该使用多个订阅，如果您的请求彼此不依赖，您可以使用
combinelatetest
操作符，这样所有请求都将同时执行，并在完成后收到通知：

ionViewLoaded() {
  let loader = this.loading.create({
    content: 'Getting latest entries...',
  });
  let loaded = Observable.combineLatest(
    this.someService.getLastEntries().do((entries) => {
      //do stuff with last entries
    }),
    this.someOtherServices.getOtherStuff().do((stuff) => {
      // do stuff with stuff
    })
    // etc...
  )
  loader.present().then(() => loaded.toPromise()).then(() => loader.dismiss());
}

我正在我的应用程序中使用以下实用程序。如果我们想显示同一个加载程序并且需要在不同的步骤中更改加载程序文本，那么这也适用于多个步骤或/和页面

我们可以多次调用showLoader（），最终需要调用hideLoader（）

代码中的第二个请求在哪里？另请注意，这并不正常，因为在加载程序上调用
discouse
之前，您没有等待请求完成……请添加更多有关请求的信息，它们之间的关系如何？一个部门是不是在另一个部门？@n00dl3:问得好。不，他们彼此不依赖。我编辑了我的代码，将其放入订阅中。Gabriel的回答是正确的，但会影响性能，因为所有异步请求都会变得同步。这些信息现在有用吗？不，所有异步请求都不会变成同步的，它们会一个接一个地被发送。但是这会影响性能，不是吗？您正在嵌套所有调用，因此所有异步调用现在都将变为同步？使用多个订阅是一个坏主意。关于forkJoin呢？对我来说，它看起来更好，因为代码很容易阅读。有什么想法吗？谢谢你@Sandeep
@Injectable()
export class Utility {
    loader: any = null;
    constructor(private _alertCtrl: AlertController,
        private _loadingController: LoadingController) {
    }

    private showLoadingHandler(message) {
        if (this.loader == null) {
            this.loader = this._loadingController.create({
                content: message
            });
            this.loader.present();
        } else {
            this.loader.data.content = message;
        }
    }

    private hideLoadingHandler() {
        if (this.loader != null) {
            this.loader.dismiss();
            this.loader = null;
        }
    }

    public showLoader(message) {
        this.showLoadingHandler(message);
    }

    public hideLoader() {
        this.hideLoadingHandler();
    }
}