Question

在呈现Page之前获取数据异步的正确方法是什么？

据我所知，

Angular2建议@CanActivate装饰器。遗憾的是，这不适用于Ionic2，至少不适用于我和others

显然Ionic2对@CanActivate装饰者做了些什么，see 但它没有记录，我无法弄清楚它究竟做了什么。

然而this guy指出，由于离子缓存，应该使用Ionics View States。他的例子如下：

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

看起来他期待Ionic考虑返回的承诺，但是quick glance Ionics的消息来源（至少我认为是这样）会忽略返回的值。因此，无法保证在页面呈现之前>解析承诺。这是带有onPage *的example以及它如何根据需要/预期执行。

所以我迷失了，一个人如何完成这个简单的任务？

在第一个链接中，建议在导航到页面之前解析数据，这会增加被调用者页面所需数据的知识。在我看来，这不是一个选项。

*编辑：添加了反面例子

Answer 1

对于在使用Ionic 2时抓取关于限制页面访问权限的Stackoverflow的任何人，看起来像Ionic推荐的生命周期事件是ionViewCanEnter。

来自文档：

ionViewCanEnter 在视图可以输入之前运行。这可以用作一种＆＃34;警卫＆＃34;在经过身份验证的视图中，您需要在视图可以进入之前检查权限。

http://ionicframework.com/docs/v2/api/navigation/NavController/

Answer 2

我不确定这是否是官方方式，但我使用Loading组件来处理这样的情况。您可以在Ionic API Docs中找到更多信息。

页面.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()方法。

您可以找到working plunker here（使用测试版9）

Answer 3

如果您只从一个位置导航到该页面，那么您是否只是在导航并使用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;
        }
    }

在呈现“Page”之前获取数据异步

3 个答案: