0

我一直在努力弄清楚如何在显示启动画面时检查网络连接。我在很多地方搜索了代码，但大多数文章都已经过时了。我按照这里提到的教程：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>`

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

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

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

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

“本机：尝试调用 Network.type，但未安装网络插件。网络插件：'ionic plugin add cordova-plugin-network-information'

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

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

4

3 回答 3

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

}
于 2017-03-08T10:37:48.813 回答
0

  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两次

我希望这会有所帮助....除了在启动画面期间无需检查....进行provider检查网络状态，然后致电您的新提供商/服务app.component.ts

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

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

于 2017-03-08T09:13:44.780 回答
0

从此参考—— 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 { }`

希望这会有所帮助。

于 2017-08-24T13:18:47.160 回答