ionic2：初始屏幕期间的网络连接检查

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

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

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

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

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

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

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

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

Answer 1

来自这里的参考 - 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 { }`

希望这会有所帮助。

Answer 2

在您的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 3

1. 嗨，请确保您拥有最新版本的 ionic-native： https://github.com/driftyco/ionic-native/blob/master/CHANGELOG.md

2. 请参阅此实现： https://forum.ionicframework.com/t/using-ionic-2-rc-4-native-network/75715/4

3. 还有另一个与此相关的问题，on disconnect 触发两次而不是仅一次： 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