ネットワークをチェックしてHTTPリクエストでトーストを表示

Question

私はionicには新しく、現在はIonic 2で働いています。ユーザーがオフラインになったときにトーストを表示したいと思います。私は現在、以下の私のコードに示されているようにそれを行うことができます（ユーザーがオフラインになるたびにトーストショー）。しかし、私は何をしたいのhttpリクエスト（トレスをリフレッシュし、無限のスクロールにプル）にトーストを示しています。そのため、データが既にロードされている場合でも、ユーザーが無限のスクロールでデータを読み込んでリフレッシュしようとするとトーストが表示され、オフラインであることが通知されます。

export class HomePage { 
    datas:any = []; 
    page:number =1; 
    connected: Subscription; 
    disconnected: Subscription; 

    constructor(private toast: ToastController, private network: Network, public navCtrl: NavController, private wpapi: Wpapi) { 
     this.getPosts(); 
    } 

    displayNetworkUpdate(connectionState: string){ 
     //let networkType = this.network.type 
     this.toast.create({ 
     message: `You are currently ${connectionState}, please re connect your data`, 
     duration: 3000 
     }).present(); 
    } 

    ionViewDidEnter() { 
      this.disconnected = this.network.onDisconnect().subscribe(data => { 
      console.log(data) 
      this.displayNetworkUpdate(data.type); 
      }, error => console.error(error)); 
    } 


    getPosts() { 

     //this.page = '1'; 
     //this.wpapi.index(this.page) 
     this.wpapi.index(1) 
     .subscribe(data => { 
      this.datas = data; 
      console.log(this.datas); 
     }); 
    } 

    loadMore(infiniteScroll) { 

     this.page++; 

     this.wpapi.index(this.page).subscribe(datas => { 
      // Loads posts from WordPress API 
      let length = datas["length"]; 

      if(length === 0) { 
      infiniteScroll.complete(); 
      return; 
      } 

      for (var i = length - 1; i >= 0; i--) { 
      this.datas.push(datas[i]); 
      } 

      infiniteScroll.complete(); 
     }); 
    } 

    doRefresh(refresher) { 
     this.wpapi.index(1) 
     .subscribe(data => { 
      this.datas = data; 
     refresher.complete(); 
     }); 
    } 

    ionViewWillLeave(){ 
     this.connected.unsubscribe(); 
     this.disconnected.unsubscribe(); 
    } 
} 

Answer 1

これは私がやっていることです。私のapp.components私は接続のサブスクライバをオフラインまたはオンラインbeeingので、ユーザーがオフラインになる場合私はconnブール変数をfalseで保存するオンラインで私は私のlocalStorageにtrueを保存し、それがオフラインになったと言って乾杯オンラインでトーストを提示する必要はありません）。

network.onDisconnect().subscribe(() => { 
    storage.set('conn', false); 
    let conoff = ToastCtrl.create({ 
     closeButtonText: 'Ok', 
     showCloseButton: true, 
     message: 'You're not connected to internet.', 
     position: 'top' 
    }); 

    conoff.present(); 
}); 

あなたはすべてのコンポーネント、ページ入り、HTTP呼び出しでだから、

import { Injectable } from '@angular/core'; 
import { Storage } from '@ionic/storage'; 
import { ToastController, Platform } from 'ionic-angular'; 

@Injectable() 
export class Verificador { 

    constructor(public toast: ToastController, public storage: Storage, public platform: Platform) { 
    } 

    verifyConnection =(): Promise<boolean> => { 
     return new Promise<boolean>((res, rej) => { 
      this.storage.get('conn').then(conn => { 
       if (conn) { 
        res(true); 
       } else { 
        let t = this.toast.create({ 
         closeButtonText: 'Ok', 
         showCloseButton: true, 
         message: 'You can't do this without internet.', 
         position: 'top' 
        }); 

        t.present(); 
        res(false); 
       } 
      }) 
     }) 
    } 
} 

のようなものがこれを行うためのサービスを作成することができ、それならば、あなたは、そのサービス/プロバイダをインポートし、verifyConnection関数を呼び出しますtrueを返す場合は、ユーザーに必要な処理をさせ、falseの場合はプロバイダがトーストを表示します。

import { ConnVerification} from '../../../providers/ConnVerification'; 

@IonicPage() 
@Component({ 
    selector: 'your-page', 
    templateUrl: 'your-page', 
    providers: [ConnVerification] 
}) 

export class YourPage { 
    constructor(public verif: ConnVerification){} 

    myFunctionForSomething(){ 
    this.verif.verifyConnection().then(conn =>{ 
     if(conn){ 
     // DO YOUR CODE 
     } 
     // NO NEED FOR ELSE SINCE IT'S HANDLED ON PROVIDER 
    }) 
    } 
} 

はそれが役に立てば幸い:)