Ionic 3 - 如何使用cordova插件與離子網絡接口？

Question

我的問題：我需要我的應用程序搜索本地WiFi網絡以查找具有特定端口上的應用程序的服務器計算機。 我不想將服務器IP地址硬編碼到應用程序中，因為它可能在許多地方使用。

更新：所以我需要能夠找到網絡上所有設備的IP地址。

到目前為止我做了什么：

通過執行以下步驟，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 

您需要將其聲明為global.And您還需要在device或emulator上測試它，因為這是一個plugin 。

 declare var NetworkInterface: any;

舊答案：

您可以使用本機網絡插件輕松完成。

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

來自doc：

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

通過直接訪問window對象然后訪問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 { }

然后，您可以根據插件文檔簡單地導入並在頁面上使用它。