Ottieni dati asincroni prima che venga eseguito il rendering di `Page`

Question

Qual è il modo corretto per ottenere dati asincroni prima che venga eseguito il rendering di Page?

Angular2 suggerisce il decoratore @CanActivate per quanto ho capito. Purtroppo questo non sta lavorando con Ionic2, almeno non per me e per others

Apparentemente Ionic2 fa qualcosa con il @CanActivate decoratore, see Ma non è documentato e non riesco a capire che cosa fa esattamente.

Tuttavia this guy indica che è necessario utilizzare Ionics View States in ogni caso, a causa della memorizzazione nella cache ionica. Il suo esempio è simile al seguente:

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

che si presenta come egli si aspetta ionico a prendere in considerazione la promessa tornato, ma un quick glance a fonti Ionics dimostra tutti (almeno io la penso così) che il valore restituito viene ignorato. Quindi non vi è alcuna garanzia che la promessa venga risolta prima del la pagina venga visualizzata. Ecco uno example con onPage * e come non funziona come necessario/previsto.

Quindi mi sono perso, come si raggiunge questo semplice compito?

Nel primo collegamento, è stato suggerito di risolvere i dati prima di navigare verso la pagina, il che impone la conoscenza di quali dati sono necessari per la pagina sul chiamato. Questa non è un'opzione secondo me.

* edit: aggiunto esempio negativo

Answer 1

io non sono sicuro se questo è il modo ufficiale di farlo, ma io uso la componente Loading per situazioni come questa. È possibile trovare ulteriori informazioni in .

La pagina .ts del file sarebbe simile a questa:

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

Il codice è molto semplice in modo che non ha bisogno di ulteriori dettagli, l'idea è di definire un loading in modo che possiamo mostrarlo, quindi provare a ottenere le informazioni e non appena otteniamo tali dati, possiamo nasconderlo chiamando il metodo this.loading.dismiss().

È possibile trovare uno working plunker here (utilizzando la versione beta.9)

Answer 2

Se ci si sposta solo a quella pagina da una posizione, non si poteva semplicemente caricare i dati prima la navigazione e l'utilizzo del NavParams per passare i dati?

Sto usando questa struttura per una pagina di profilo, da una certa pagina di indice faccio clic su un utente, e quindi recuperare il suo profilo prima di visitare il suo profilo. Puoi mostrare un bel Loading mentre questo sta accadendo.

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

Ora nella pagina del profilo è possibile utilizzare la NavParams per inizializzare la tua pagina.

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

Per chiunque strisciando StackOverflow su limitare l'accesso pagina quando si utilizza ionico 2, sembra che eventi del ciclo di vita consigliato di ionica di attingere è ionViewCanEnter.

Dalla documentazione:

ionViewCanEnter viene eseguito prima vista può entrare. Questo può essere usato come una sorta di "guardia" nelle viste autenticate in cui è necessario controllare le autorizzazioni prima che la vista possa entrare.

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