ionic2：启动画面期间的网络连接检查 [英] ionic2: network connectivity check during splash screen

问题描述

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

I've been trying hard to figure out how to check for network connectivity while the splashscreen is being displayed.I've searched for the code in many places but most of those articles are outdated. I followed the tutorial that's mentioned here: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文件中。

But then I found out that Network.connection is deprecated and has been replaced by Network.type on the ionic2 website. So I've replaced the word connection with Network.type everywhere. So I checked out the ionic2 website and found this code which I included in the home.ts file.

    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文件

here is my home.html file

`<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>`

我尝试实现相同的代码，但没有'工作。

I tried implementing the same code but doesn't work.

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

I want to know what is the exact code that I can use ?

那是什么如果它是正确的，我需要导入才能使用这个代码吗？

What is that I need to import to use this code if it is the right one?

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

Also I want to know how to run it during the splashscreen ? On the console I found these errors

原生：尝试调用Network.type，但未安装网络插件。
网络插件：'离子插件添加cordova-plugin-network-information'

"Native: tried calling Network.type, but the Network plugin is not installed. Network plugin: 'ionic plugin add cordova-plugin-network-information'

但是我已经按照上面的命令安装了所需的插件。我还安装了npm install ionic-native。

But i've already installed the required plugin following that above command.I also installed "npm install ionic-native".

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

I reinstalled them on seeing this error but this still persists.

推荐答案

在 config.xml 中添加以下内容：

< preference name =AutoHideSplashScreenvalue =false/>

这将使SplashScreen在您手动隐藏之前保持可见状态。

This will make the SplashScreen stay visible until you manually hide it.

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

Then in your app.component.ts do the following:

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

}

这篇关于ionic2：启动画面期间的网络连接检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！