离子框架网络插件问题

Question

我正在使用 ionic 3。我安装了网络插件来检查 app.component.ts 中的网络连接

https://ionicframework.com/docs/native/network/

但是当我使用这种方法时，它给了我错误。

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
    at Network.onDisconnect (index.js:61)
    at app.component.ts:17
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at c (polyfills.js:3)
    at polyfills.js:3
    at t.invokeTask (polyfills.js:3)
    at Object.onInvokeTask (core.js:4751)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)
    at o (polyfills.js:3)
    at e.invokeTask [as invoke] (polyfills.js:3)
    at p (polyfills.js:2)
    at HTMLDocument.v (polyfills.js:2)

而我的 app.component.ts 的代码是

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,private network: Network) {
    platform.ready().then(() =>
    {
                this.network.onDisconnect().subscribe(() =>
          {
            console.log("onDisconnect");
          });

           this.network.onConnect().subscribe(() =>
           {
             console.log("onConnect");
           });

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

我的 package.json

{
  "name": "testNetwork1",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.18.0",
    "@ionic-native/network": "^5.2.0",
    "@ionic-native/splash-screen": "~4.18.0",
    "@ionic-native/status-bar": "~4.18.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "2.2.0",
    "cordova-plugin-network-information": "2.0.1",
    "ionic-angular": "3.9.3",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "^3.2.3",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-network-information": {}
    }
  }
}

Answer 1

您正在使用 ionic 3/angular 5.x

您需要参考ionic v3 documentation 并使用ionic native v4。

npm install --save @ionic-native/network@4

确保删除版本 5.x ionic-native/network 包装器

您的导入将是：

import { Network } from '@ionic-native/network';

Answer 2

这里是当您的应用在线或离线时检查互联网连接的示例代码。

首先，您需要创建网络提供商并添加以下代码，

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

export enum ConnectionStatusEnum {
    Online,
    Offline
}


@Injectable()
export class NetworkProvider {

  previousStatus;

  constructor(public alertCtrl: AlertController, 
              public network: Network,
              public eventCtrl: Events) {

    console.log('Hello NetworkProvider Provider');

    this.previousStatus = ConnectionStatusEnum.Online;

  }

    public initializeNetworkEvents(): void {
        this.network.onDisconnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Online) {
                this.eventCtrl.publish('network:offline');
            }
            this.previousStatus = ConnectionStatusEnum.Offline;
        });
        this.network.onConnect().subscribe(() => {
            if (this.previousStatus === ConnectionStatusEnum.Offline) {
                this.eventCtrl.publish('network:online');
            }
            this.previousStatus = ConnectionStatusEnum.Online;
        });
    }

}

现在在初始化您的应用时将此代码添加到 app.component 文件中，

import { Component } from '@angular/core';
import { Platform,  Events } from 'ionic-angular';
import { Network } from '@ionic-native/network';
import { NetworkProvider } from '../providers/network/network';

@Component({
    templateUrl: 'app.html'
})

export class MyApp {

        constructor(public platform: Platform, 
                    public events: Events,
                    public network: Network,
                    public networkProvider: NetworkProvider) { }

        initializeApp() {

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

                this.networkProvider.initializeNetworkEvents();

                // Offline event
                this.events.subscribe('network:offline', () => {
                    alert('network:offline ==> '+this.network.type);    
                });

                // Online event
                this.events.subscribe('network:online', () => {
                    alert('network:online ==> '+this.network.type);        
                });

            });
        }

}