Uzyskiwanie asynchronizacji danych przed wyrenderowaniem strony "Page"

Question

Jaki jest poprawny sposób uzyskania danych async przed renderowaniem Page?

Angular2 proponuje dekoratorowi @CanActivate, o ile rozumiem. Niestety to nie działa z Ionic2, przynajmniej nie dla mnie i dla others

Apparently Ionic2 robi coś z @CanActivate dekoratora, see ale nie jest udokumentowane i nie mogę dowiedzieć się, co robi dokładnie.

Mimo to, w każdym razie, this guy należy użyć Ionics View States, z powodu buforowania jonów. Jego przykład wygląda następująco:

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

który wygląda jak on oczekuje jonowej w celu rozważenia wracającą obietnicę, ale quick glance A Źródło IONICS objawia (przynajmniej tak mi się wydaje), że zwracana wartość jest ignorowana. Dlatego nie ma gwarancji, że obietnica zostanie rozwiązana przed usunięciem tej strony. Oto example z onPage * i tym, jak nie działa zgodnie z oczekiwaniami/oczekiwaniami.

Więc jestem zagubiony, jak można osiągnąć to proste zadanie?

W pierwszym linku zasugerowano, aby rozwiązać dane przed przejściem do strony, co obciąża wiedzę, jakie dane są potrzebne stronie na stronie. Moim zdaniem nie jest to opcja.

* edit: dodaje negatywny przykład

Answer 1

Nie jestem pewien, czy jest to oficjalny sposób to zrobić, ale używam komponentu Loading w sytuacjach takich jak ta. Możesz znaleźć więcej informacji w .

Strona .ts plik będzie wyglądać następująco:

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

Kod jest bardzo prosty, więc nie ma potrzeby dalszych szczegółów, chodzi o to, aby zdefiniować loading więc możemy go wyświetlić, a następnie spróbuj uzyskać informacje, a gdy tylko otrzymamy te dane, możemy je ukryć, wywołując metodę this.loading.dismiss().

Możesz znaleźć working plunker here (używając wersji beta.9)

Answer 2

Jeśli tylko przejdź do tej strony z jednego miejsca, nie można po prostu załadować danych przed nawigowanie i używanie NavParams przekazać dane?

Używam tej struktury dla strony profilu, na określonej stronie indeksu klikam użytkownika, a następnie odzyskuję jego profil przed odwiedzeniem jego profilu. Możesz pokazać ładną Loading, podczas gdy tak się dzieje.

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

Teraz na stronie profilu możesz użyć NavParams, aby zainicjować swoją stronę.

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

Dla każdego przeszukiwania Stackoverflow o ograniczenie dostępu stronę przy użyciu Ionic 2, wygląda zalecanej imprezy cyklem jonowych, aby dopasować się do jest ionViewCanEnter.

Od docs:

ionViewCanEnter Biegnie przed pogląd może wejść. Może to służyć jako rodzaj "straży" w uwierzytelnionych widokach, w których musisz sprawdzić uprawnienia, zanim widok może wejść.

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