2016-03-20 25 views
0

Angular2 kullanan mobil geliştirme için iyonik beta çerçevesini kullanıyorum, bu yüzden bir Angular2 sorusunun daha fazlası olduğunu düşünüyorum çünkü bir HTTP sağlayıcısı için sağlayıcı kullanmanın daha önemli olduğunu düşünüyorum .HTTP verilerinin hazır olup olmadığını kontrol etmek için sağlayıcıyı kontrol etme

Uygulam app.js. Bu dosyada, arka planda bazı bilgileri almak için bir HTTP çağrısı yapan sağlayıcımı aradım. Bu gerçekleşirken kullanıcı app.js'den uzaklaşır ve başka bir sayfaya gider. Page.js. Arka planda, http araması hala yapılmakta ve tamamlanmıştır. Sayfa sağlayıcıdan gelen verileri görüntülemeli, ancak veriler henüz hazır değil. Ben Açısal için yeni ve bu tür bir durumun nasıl ele alınacağından emin değilim. Sayfamdan sağlayıcımı nasıl arayabilirim, aramanın durumunu kontrol et (veri hazır olup olmadığına, bir hata meydana gelmişse ya da bir çağrı yapılmışsa) ve hazırsa verileri alın.

Benim app.js:

import {App, Platform} from 'ionic-angular'; 
import {TabsPage} from './pages/tabs/tabs'; 
import {FacebookFriends} from './providers/facebook-friends/facebook-friends'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    providers: [FacebookFriends], 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    static get parameters() { 
    return [[Platform]]; 
    } 

    constructor(platform:Platform,facebookFriends:FacebookFriends) { 
    this.rootPage = TabsPage; 

    this.fb = facebookFriends; 

    platform.ready().then(() => { 

     this.fb.load().then((success)=>{ 
      if(success){ 
       console.log('success = ' + JSON.stringify(success)); 
      } 
     }, 
     (error)=>{ 
      console.log('Error loading friends : ' + JSON.stringify(error)); 
     }); 


    }); 
    } 
} 

Benim Sağlayıcı:

import {Injectable, Inject} from 'angular2/core'; 
import {Http} from 'angular2/http'; 

/* 
    Generated class for the FacebookFriends provider. 

    See https://angular.io/docs/ts/latest/guide/dependency-injection.html 
    for more info on providers and Angular 2 DI. 
*/ 
@Injectable() 
export class FacebookFriends { 
    constructor(@Inject(Http) http) { 
    this.http = http; 
    this.data = null; 
    } 

    load() { 
    if (this.data) { 
     // already loaded data 
     return Promise.resolve(this.data); 
    } 
    // don't have the data yet 
    return new Promise(resolve => { 
     // We're using Angular Http provider to request the data, 
     // then on the response it'll map the JSON data to a parsed JS object. 
     // Next we process the data and resolve the promise with the new data. 
     var headers = new Headers(); 
          // headers.append('Content-Type', 'application/json'); 
          headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
          this.http.post(
           'http://192.168.1.45:3000/testrestapi', 
           {headers: headers} 
          ).map((res => res.json()) 
     .subscribe(data => { 
      // we've got back the raw data, now generate the core schedule data 
      // and save the data for later reference 
      this.data = data; 
     console.log('Friends Provider was a success!'); 
     console.log(JSON.stringify(data)); 
      resolve(this.data); 
     }, 
    (err)=>{ 
     console.log('Error in Friends Provider!'); 
    }, 
    ()=>{ 
      console.log('Friends Provider network call has ended!'); 
    }); 
    }); 
    } 
} 

My sayfa:

import {Page} from 'ionic-angular'; 
import {FacebookFriends} from '../../providers/facebook-friends/facebook-friends'; 

@Page({ 
    templateUrl: 'build/pages/page1/page1.html' 
}) 
export class Page1 { 

constructor(platform:Platform,facebookFriends:FacebookFriends) { 
    this.rootPage = TabsPage; 

    this.fb = facebookFriends; 


    } 

} 

cevap

0

paylaşılan bir Servic kullanmalıdır Gözlenebilir tür bir özelliği ile e: Veri vaadi geri aramasında, hizmetin notifyDataReady yöntemi denir olacağını orada olacak

export class SharedService { 
    dataReadyNotifier: Observer; 
    dataReadyObservable: Observable; 

    constructor() { 
    this.dataReadyObservable = Observable.create((observer) => { 
     this.dataReadyNotifier = observer; 
    }); 
    } 

    notifyDataReady(data) { 
    this.dataReadyNotifier.next(data); 
    } 
} 

.

export class SomeComponent { 
    constructor(private sharedService: SharedService) { 
    this.sharedService..dataReadyObservable.subscribe((data) => { 
     // Do something with data 
    }); 
    } 

    (...) 
} 
:

bildirilmesi için bileşenler gözlemlenebilir hizmet bu şekilde kayıt altına alacak

İlgili konular