Ionic framework 离子框架网络插件问题

我用的是离子3。我在app.component.ts中安装了网络插件来检查网络连接

但当我使用这种方法时，它会给我错误

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的代码是

构造器平台：平台，状态栏：状态栏，splashScreen：splashScreen，专用网络：网络{ platform.ready.then=> { this.network.onDisconnect.subscribe=> { console.logonDisconnect； }; this.network.onConnect.subscribe=> { console.logonConnect； }; //好了，平台准备好了，我们的插件也可以使用了。 //在这里，您可以做任何您可能需要的更高级别的本地操作。 statusBar.styleDefault； splashScreen.hide； }; } mypackage.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": {}
    }
  }
}

---

以下是用于在应用程序联机或脱机时检查internet连接的示例代码

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

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

            });
        }

}

---

以下是用于在应用程序联机或脱机时检查internet连接的示例代码

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

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

            });
        }

}

---

您使用的是ionic 3/angular 5.x

你需要参考和使用

请确保删除版本5.x离子本机/网络包装器

您的导入将是：

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

---

您使用的是ionic 3/angular 5.x

你需要参考和使用

请确保删除版本5.x离子本机/网络包装器

您的导入将是：

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

---

我也尝试过同样的方法，但在promise:TypeError:Object中未发现同样的错误。。。不是函数类型错误：对象。。。不是NetworkProvider.webpackJsonp.340.NetworkProvider.initializeNetworkEvents Network.ts:36上的Network.onDisconnect index.js:61函数。我共享的示例代码对我有效。请尝试创建网络提供程序。它可能会解决您的问题，或者在查询中发布更新的组件代码以查看。我还创建了一个网络提供程序但无法解决此问题获得相同的错误尝试从'@ionic native/network/ngx'导入网络作为导入{network}；我也尝试过同样的方法，但在promise:TypeError:Object中未发现同样的错误。。。不是函数类型错误：对象。。。不是NetworkProvider.webpackJsonp.340.NetworkProvider.initializeNetworkEvents Network.ts:36上的Network.onDisconnect index.js:61函数。我共享的示例代码对我有效。请尝试创建网络提供程序。它可能会解决您的问题，或者在查询中发布更新的组件代码以查看。我还创建了一个网络提供程序但无法解决此问题获得相同的错误尝试从'@ionic native/network/ngx'导入网络作为导入{network}；你的package.json包含哪些内容？请检查我是否更新了我的package.json@surajraow你的package.json包含哪些内容？请检查我是否更新了我的package.json@SurajRaoIts所有ionic本机插件都存在相同的问题。5.x版本和ngx导入是针对ionic 4/angular 7.x ngx是angular 7。你的其他包装似乎只有在4.x版本，所以他们正在工作。请帮我解决这个问题@Suraj RaoIts所有的ionic原生插件都有同样的问题。5.x版本和ngx导入是针对ionic 4/angular 7.x ngx是angular 7。你的其他包装似乎只有在4.x版本，所以他们正在工作。请帮我完成这个@Suraj Rao