如何顯示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

回答

相關問題