离子3-如何使用Cordova插件网络接口与离子

Question

我的问题：我需要我的应用程序来搜索本地WiFi网络，以在特定端口上找到带有应用程序的服务器计算机。我不想将服务器IP地址硬编码到应用程序中，因为它可能在许多位置都可以使用。

更新：，因此我需要能够找到网络上所有设备的IP地址。

到目前为止IV做了什么：

iv通过执行以下步骤遵循堆栈溢出和在线上的其他指南：

1。安装Cordova插件：

 "cordova plugin add cordova-plugin-networkinterface"

2。声明全局范围中的变量以访问对象

declare var NetworkInterface: any;
export class TestClass{}

3。使用组件内的全局变量

调用对象

NetworkInterface.getWiFiIPAddress((ip) => {
   console.log("network ip address = " + ip);
});

但是，这会导致从移动移动运行时的运行时间错误：

错误错误：未接收（在承诺中）：ReferenceError：NetworkInterface 不是定义

我还尝试在全球声明变量，然后尝试在组件中应用字符串值，只是为了遇到相同的问题。该变量在全球范围内不起作用似乎更是一个问题吗？任何帮助都很棒！

Answer 1

您需要在 CLI：

下使用

ionic plugin add cordova-plugin-networkinterface --save 

您需要将其声明为全局。您还需要在device或emulator上对其进行测试，因为这是plugin。

 declare var NetworkInterface: any;

旧答案：

您可以使用本机网络插件轻松完成。

ionic cordova plugin add cordova-plugin-network-information
npm install --save @ionic-native/network

来自文档：

import { Network } from '@ionic-native/network';
constructor(private network: Network) { }
...
// 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);
});

Answer 2

通过直接访问窗口对象，然后访问networkInterface对象。

。

代码解决方案：

 (<any>window).networkinterface.getWiFiIPAddress((ip) => {
     console.log("network ip address = " + ip);
 });

这意味着我不再需要使用全局变量进行参考。希望这会帮助别人。

更新，感谢Sampath提供了另一种解决方案；看来我应该使用：

ionic cordova plugin add cordova-plugin-networkinterface --save

而不是：

cordova plugin add cordova-plugin-networkinterface

Answer 3

如果要访问网络插件，则只需将其添加到app.module.ts提供者集合中即可。这将其注册为单身人士。

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    Network
  ]
})
export class AppModule { }

然后，您可以根据插件文档将其导入并在页面上使用。