'पृष्ठ' को प्रस्तुत करने से पहले डेटा एसिंक प्राप्त करें

Question

Page से पहले डेटा एसिंक प्राप्त करने का सही तरीका क्या है?

Angular2@CanActivate सजावटी को जहां तक ​​मैं समझता हूं, सुझाव देता है। दुर्भाग्य से यह Ionic2 के साथ काम नहीं कर रहा है, कम से कम मेरे लिए नहीं है और others

जाहिर Ionic2 के लिए @CanActivate डेकोरेटर के साथ कुछ करता है, see लेकिन इसकी दर्ज नहीं किया और मैं समझ नहीं क्या यह वास्तव में होता है।

फिर भी this guy अंक किसी को भी ionics कैशिंग के कारण Ionics View States का उपयोग करना चाहिए। उसका उदाहरण इस प्रकार है:

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

कौन सा की तरह वे लौटे वादा विचार करने के लिए आयोनिक उम्मीद कर रही है लगता है, लेकिन एक quick glance एक Ionics स्रोतों का पता चलता है (कम से कम मुझे ऐसा लगता है) कि दिए गए मान अनदेखा किया जाता है। इसलिए इस बात की कोई गारंटी नहीं है कि से पहले संकल्प हल हो जाता है। ऑनपेज * के साथ example यहां है और यह आवश्यक/अपेक्षित के रूप में कैसे नहीं करता है।

तो मैं खो गया हूं, कोई इस सरल कार्य को कैसे प्राप्त करता है?

पहले लिंक में, पृष्ठ पर नेविगेट करने से पहले डेटा को हल करने का सुझाव दिया गया था, जो ज्ञान को बोझ पर पृष्ठ के लिए डेटा की आवश्यकता होती है। यह मेरी राय में एक विकल्प नहीं है।

* संपादित करें: जोड़ा नकारात्मक उदाहरण

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/