Получить данные async перед тем, как «Страница» будет отображаться

Question

Каков правильный способ получения данных асинхронно до получения Page?

Angular2 предлагает @CanActivate декоратор, насколько я понимаю. К сожалению, это не работает с Ionic2, по крайней мере, не для меня, и для others

Видимо Ionic2 делает что-то с @CanActivate декоратора, see Но его не документированы и я не могу понять, что это делает именно.

Тем не менее this guy указывает, что следует использовать Ionics View States, в любом случае, из-за ионного кеширования. Его пример выглядит следующим образом:

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

, который выглядит, как он ожидает Ионные рассмотреть возвращаемый обещание, но quick glance а источники ионики раскрывает (по крайней мере я так думаю), что возвращаемое значение игнорируется. Следовательно, нет никакой гарантии, что обещание будет устранено. до страница будет отображаться. Вот example с onPage * и как он не работает по мере необходимости/ожидаемого.

Итак, я потерян, как достичь этой простой задачи?

В первой ссылке было предложено разрешить данные перед тем, как перейти на страницу, что обременяет знания, какие данные необходимы для страницы на вызываемом абоненте. На мой взгляд, это не вариант.

* Редактирование: добавлен негативный пример

Answer 1

Я не уверен, если это официальным способом сделать это, но я использую Loading компонент для ситуаций, подобных этому. Вы можете найти более подробную информацию в .

страница .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 2

Если вы только перейти на эту страницу из одного места, не могли бы вы просто загрузить данные до навигации и используя 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; 
     } 
    } 

Answer 3

Для тех, кто ползает Stackoverflow о ограничения доступа страницы при использовании Ионных 2, похоже, рекомендованного событие жизненного цикла Ионного к водопроводному крану является ionViewCanEnter.

Из документов:

ionViewCanEnter Запускается перед вид может войти. Это может использоваться как своего рода «защита» в аутентифицированных представлениях, где вам нужно проверить разрешения до того, как представление может войти.

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