Question

在显示启动画面时，我一直在努力弄清楚如何检查网络连接。我已经在很多地方搜索了代码，但大部分文章已经过时了。我按照这里提到的教程：https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

但后来我发现Network.connection已被弃用，并已被ionic2网站上的Network.type取代。所以我已经用Network.type取代了连接这个词。所以我检查了ionic2网站，发现了我在home.ts文件中包含的代码。

    import {Network} from 'ionic-native';
    checkConnection() {
    //console.log("entrou");
    //console.log(Network);
    let disconnectSubscription = Network.onDisconnect().subscribe(() => {
      console.log('network was disconnected :-( ')
    });
    disconnectSubscription.unsubscribe();
    console.log("watch network");
    console.log("Conexao" + Network.type);
    let connectSubscription = Network.onConnect().subscribe(() => {
      console.log('network connected!');
      setTimeout(() => {
        console.log('network status');
        console.log(Network.type); 
        if (Network.type === 'WIFI') {
          console.log('we got a wifi connection, woohoo!');
         }
      }, 3000);
    });
    console.log("Sub" + connectSubscription);
    connectSubscription.unsubscribe();
  }

这是我的home.html文件

`<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <button ion-buttton (click)="checkConnection()">Check Network</button>
</ion-content>`

我尝试使用相同的代码但不起作用。

我想知道我可以使用的确切代码是什么？

如果是正确的代码，我需要导入什么才能使用此代码？

另外我想知道如何在启动画面期间运行它？在控制台上我发现了这些错误

＆＃34; Native：尝试调用Network.type，但未安装Network插件。网络插件：＆＃39;离子插件添加cordova-plugin-network-information＆＃39;

但我已按照上述命令安装了所需的插件。我还安装了＆＃34; npm install ionic-native＆＃34;。

我在看到此错误时重新安装了它们，但这仍然存在。

Answer 1

在config.xml添加以下内容：

<preference name="AutoHideSplashScreen" value="false" />

这将使SplashScreen保持可见，直到您手动隐藏它。

然后在app.component.ts执行以下操作：

constructor(private platform: Platform) {

  platform.ready().then(() => {
    // Check the network stuff here and do what you need to do
    if (Network.type == 'WIFI') console.log('We are on WIFI!');
    else console.log('We aren't on WIFI');

    // then hide the splash screen manually
    SplashScreen.hide();
  });

}

Answer 2

嗨，请确保您拥有ionic-native到最新版本： https://github.com/driftyco/ionic-native/blob/master/CHANGELOG.md
请看这个实现： https://forum.ionicframework.com/t/using-ionic-2-rc-4-native-network/75715/4
还有另一个与此相关的问题，即断开连接会触发两次而不是一次： IONIC 2 native Network.onDisconnect() running code twice

我希望这有帮助....除了在启动画面期间无需检查....为检查网络状态设置provider，然后在app.component.ts中调用您的新提供商/服务

哦，不要留意这条消息：Native: tried calling Network.type, but the Network plugin is not installed.

请确保您已正确添加：ionic plugin add cordova-plugin-network-information --save

Answer 3

从这里引用 - https://ionicframework.com/docs/native/network/

安装： $ ionic cordova plugin add cordova-plugin-network-information
$ npm install --save @ionic-native/network

并将此代码放入app.component.ts

import { Network } from '@ionic-native/network';
 constructor(private network: Network) { }
   // watch network for a disconnect
    let disconnectSubscription = 
  this.network.onDisconnect().subscribe(() => {
   console.log('network was disconnected :-(');
 });

 // stop disconnect watch
 disconnectSubscription.unsubscribe();


  // watch network for a connection
  let connectSubscription = this.network.onConnect().subscribe(() => 
  {
   console.log('network connected!');
 // 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.
 setTimeout(() => {
 if (this.network.type === 'wifi') {
 console.log('we got a wifi connection, woohoo!');
   }
 }, 3000);
  });

  // stop connect watch
  connectSubscription.unsubscribe();

并将代码添加到app.module.ts

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

  ...

@NgModule({
 ...

 providers: [
  ...
   Network
   ...
  ]
  ...
   })
export class AppModule { }`

希望这会有所帮助。

ionic2：启动画面期间的网络连接检查

3 个答案: