16

Pageレンダリングされる前にデータを非同期に取得する正しい方法は何ですか?

Angular2@CanActivate私が理解している限り、デコレータを提案します。悲しいことに、これは Ionic2 では機能しません。少なくとも私や他の人にとってはそうではありません。

どうやらデコレータでIonic2何かを行うようですが、それは文書化されておらず、正確に何をするのかわかり ません。@CanActivate

それにもかかわらず、この男Ionics View Statesは、イオンキャッシングのために、とにかく代わりに使用する必要があると指摘しています。彼の例は次のようになります。

  onPageWillEnter() { 
      return this._service.getComments().then(data => this.comments = data);
  }

これは、Ionic が返された promise を考慮することを期待しているように見えますが、Ionics のソースを一目見ただけで、返された値が無視されていることがわかります (少なくとも私はそう思います)。したがって、ページがレンダリングされる前にpromise が解決されるという保証はありません。onPage*の例と、必要/期待どおりに実行されない方法を次に示します。

どうすればこの単純なタスクを達成できますか?

最初のリンクでは、ページに移動する前にデータを解決することが提案されていました。これは、呼び出し先のページに必要なデータを知るのに負担がかかります。私の意見では、これはオプションではありません。

*編集: 否定的な例を追加

4

3 に答える 3

7

これが正式な方法Loadingかどうかはわかりませんが、このような状況でコンポーネントを使用しています。詳細については、Ionic API ドキュメントを参照してください。

ページ.tsファイルは次のようになります。

import {Component} from '@angular/core';
import {Loading, NavController} from 'ionic-angular';

@Component({
  templateUrl:"page1.html"
})
export class Page1 {
  // Loading component
  loading : any;
  // Information to obtain from server
  comments: string = '';

  constructor(nav: NavController) {
    this.nav = nav;
  }

  onPageWillEnter() {
    // Starts the process 
    this.showLoading();
  }

  private showLoading() {
    this.loading = Loading.create({
      content: "Please wait..."
    });
    // Show the loading page
    this.nav.present(this.loading);
    // Get the Async information 
    this.getAsyncData();
  }

  private getAsyncData() {

    // this simulates an async method like
    // this._service.getComments().then((data) => { 
    //     this.comments = data);
    //     this.hideLoading();
    // });

    setTimeout(() => {
      // This would be the part of the code inside the => {...}
      this.comments = "Data retrieved from server";
      // Hide the loading page
      this.hideLoading();
    }, 5000);
  }

  private hideLoading(){
    // Hide the loading component
    this.loading.dismiss();
  }
}

コードは非常に単純なので、これ以上の詳細は必要ありません。アイデアは、 を定義してloading表示できるようにすることです。次に、情報を取得しようとします。データを取得したらすぐに、this.loading.dismiss()メソッドを呼び出して非表示にできます。

ここで動作するプランカーを見つけることができます(beta.9 を使用)

于 2016-06-24T13:08:58.997 に答える
1

1 つの場所からそのページにのみ移動する場合、移動して を使用してNavParamsデータを渡す前に、単純にデータをロードできませんか?

この構造をプロファイルページに使用しています。特定のインデックスページからユーザーをクリックし、プロファイルにアクセスする前にプロファイルを取得します。Loadingこれが起こっている間、あなたは素晴らしいことを示すことができます.

let self=this;
this.profileSvc.getProfile(id)
.then(profile => {
    self.nav.push(Profile, {profile:profile});
});

プロファイル ページで、 を使用しNavParamsてページを初期化できます。

export class Profile {
    profile:any;
    constructor(private params:NavParams) {
        if(params.get('profile')) {
            this.profile = params.get('profile');
        } else {
            this.profile = this.me;
        }
    }
于 2016-05-19T11:47:46.553 に答える