如何仅在 ionic3 中打开互联网连接时才推送页面？

Question

我真的需要你的帮助。我正在尝试检测我的 Ionic 3 移动应用程序是否有互联网连接。它工作正常。但是我现在必须点击任何 link 现在互联网关闭了，现在这种情况下我们只有在互联网是 on.i 时才会有推送页面不明白如何再次触发 onDisconnect 功能？

//app.component.ts file
listenConnection(){
      // watch network for a disconnection if user is offline.......
      let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
        //show alert....
        const alert = this.alertCtrl.create({
          title: 'Your Data is off',
          message : 'Turn on data or wifi in setting',
          buttons: [
            {
              text: 'Ok',
              handler: (data: any) => {
               console.log('data');
             }}
          ],
          enableBackdropDismiss: false
        });
        alert.present();
      });
 
       // watch network for a connection
      let connectSubscription = this.network.onConnect().subscribe(() => {
           
          // We just got a connection but we need to wait briefly
           // before we determine the connection type. Might need to wait.
          //prior to doing any api requests as well.
          if (this.network.type === 'wifi') {
             console.log('data');
          }
      });
   }

它工作正常，但问题是假设我的警报已打开，并且在单击“确定”按钮后我们关闭了警报。现在我必须单击另一个 link 现在网络已关闭我们只有在互联网打开时才会有推送页面告诉我，任何人，如何管理这种情况？

Answer 1

所以您通常希望在具有很多页面的应用程序中执行此操作的方式：

创建一个 "foundation" 级提供程序 - 每个页面都必须导入的全局单例提供程序。
在这样的提供商中，您有 public 变量 "appIsOnline"。
此类变量会根据您的订阅以编程方式更新
每个页面都实现了 ionViewCanEnter 保护，只有在基础提供商的 var 声明应用在线时才允许页面进入堆栈。

您的提供商应该是这样的：

import { Injectable, AlertController } from '@angular/core';
import { Network } from "@ionic-native/network";

@Injectable()
export class FoundationProvider {

    public appIsOnline: boolean;
    private offlineAlert: any;

    constructor(
        private network: Network,
        private alertCtrl: AlertController
    ) {
        this.appIsOnline = true;
        this.offlineAlert = null;
        this.listenConnection();
    }

    listenConnection() {
        // watch network for a disconnection if user is offline.......
        let disconnectSubscription = this.network.onDisconnect().subscribe(() => {
            this.appIsOnline = false;
            //show alert if it is not up:
            if (!this.offlineAlert) {
                this.offlineAlert = this.alertCtrl.create({
                    title: 'Your Data is off',
                    message: 'Turn on data or wifi in setting',
                    buttons: [
                      {
                        text: 'Ok',
                        handler: (data: any) => {
                            console.log('data');
                            this.offlineAlert = null;
                        }
                      }
                    ],
                    enableBackdropDismiss: false
                });
                alert.present();
            }
        });

        // watch network for a connection
        let connectSubscription = this.network.onConnect().subscribe(() => {
            this.appIsOnline = true;
            // We just got a connection but we need to wait briefly
            // before we determine the connection type. Might need to wait.
            //prior to doing any api requests as well.
            if (this.network.type === 'wifi') {
                console.log('data');
            }
        });
    }

}

那么每个页面都需要导入这个provider，在构造函数中注入，然后给页面添加hook：

ionViewCanEnter(): boolean {
   if(this.foundationProvider.appisOnline) {
      return true;
   }   
   return false;
}

或者，根据您的应用程序的结构，您可以 "guard" .push、.setRoot 等用于导航到页面的方法。但是您应该分享更多您的代码以提供更好的建议。

如何仅在 ionic3 中打开互联网连接时才推送页面？

how can I push page only if internet connection is on in ionic3?

ionic3