Question

我是离子的新手，目前正在与Ionic 2一起工作/学习。我想在用户离线时展示祝酒词。我现在能够执行此操作，如下面的代码所示（每当用户下线时都会显示toast）。但是，我想要做的是在http请求上显示toast（拉到刷新和无限滚动）。因此，即使已经加载了数据，当用户尝试通过无限滚动来提升刷新加载更多数据时，也会显示toast，然后通知他们已脱机。

to()

Answer 1

这就是我正在做的事情。在我的app.components我有连接订阅者，离线或在线，所以如果用户离线我保存conn布尔变量为false，如果在线我在我的localStorage中保存为真并呈现吐司说它已经脱机了（如果上线就没有必要举杯祝酒了。）

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

您可以创建服务来执行此操作，例如

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

所以在每个组件，页面输入，http调用，你导入该服务/提供者并调用verifyConnection函数，如果它返回true你只是让用户做他们需要做的事情，如果它是假的提供者将展示吐司。

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

希望有所帮助：）

网络检查并在Http请求上显示Toast

1 个答案: