にはどうすればイオン2

Question

で複数の要求のためのLoadingControllerを表示します：

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つの要求があり、このようなローディングコントローラを隠す/表示すると、画面のちらつきが発生します。

loadingControllerを表示できる方法はありますか？しかし、すべてのAjaxリクエストが完了した場合にのみdismiss()が表示されますか？

EDIT:リクエストはお互いに依存しません。彼らは独立しています。私が探しているのは、観測可能なすべての要求が完了したときに通知を受ける方法です。そうすれば、すべてが完了したらLoadingControllerを終了できます。

Answer 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の内側に、これはあなたが複数のサブスクライブを使用しないでください:)

Answer 2

を支援し、あなたの要求はお互いに依存しない場合はので、すべて、combineLatest演算子を使用することができますloader.dismiss();

希望を追加すべてが完了した時点でリクエストが完了し、通知されます。

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

Answer 3

私のアプリでは次のユーティリティを使用しています。これは同じローダを表示し、異なるステップでローダテキストを変更する必要がある場合は、複数のステップやページでも機能します。

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