如何显示LoadingController在离子2

的多个请求按照爱奥尼亚文档，我可以利用这段代码加载离子LoadingController：如何显示LoadingController在离子2

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

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

    }); 
}

这工作得很好，如果我只是使1个Ajax请求。但我有5个要求，如果我隐藏/显示加载控制器这样会导致屏幕闪烁。

有没有一种方法可以在所有Ajax请求都完成后才能显示loadingController，但是只有dismiss()？

EDIT:请求不相互依赖。他们是独立的。我正在寻找的是在所有观察点的请求完成时得到通知的方法。这样我可以在所有这些完成时关闭加载控制器。

来源

2017-05-09 Tim Liberty

代码中的第二个请求在哪里？ – echonax

也注意到，这不能正常工作，因为在调用装载程序的'dismiss'之前，您并未等待请求完成... – n00dl3

请添加更多关于请求的信息，它们是如何相互关联的？一个人是否会在另一个人身上放弃？ – n00dl3

-1

您可以链接每个订阅内的所有请求。

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.dismiss()的方式并不好，它会调用someService.getLatestEntries和imediatelly使用解雇，你需要使用你的诺言归还内部/订阅/观察到的，因此只能驳回当功能完成时。

不要忘了每次打电话都要增加一个onError，因为它是5你不想让人出错，然后用户永远被卡住。因此，添加它和每一个onError内添加loader.dismiss();

希望这有助于:)

来源

2017-05-09 12:33:29

但是这会损害表现 - 不是吗？您正在嵌套所有调用，以便所有异步调用现在变为同步？ –

使用多个订阅是一个坏主意 – n00dl3

不，他们不会成为同步 – n00dl3

你不应该使用多个订阅，如果您的要求不依赖于对方，你可以使用combineLatest操作，因此所有请求将concurently执行，而当他们都完成得到通知：

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()); 
}

来源

2017-05-09 15:37:05 n00dl3

* forkJoin *怎么样？ http://www.syntaxsuccess.com/viewarticle/combining-multiple-rxjs-streams-in-angular-2.0它看起来更好，因为代码很容易阅读。请有任何想法吗？ –

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

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

@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(); 
    } 
}

来源

2017-05-09 19:21:34

如何显示LoadingController在离子2

回答

相关问题