Ionic2とAngular2を使用して 'Navigator'のプロパティに 'connection'プロパティが存在しません

Question

Ionic 2とAngular 2を使用してネットワークをチェックしたいと思います。

マイapp.tsは次のとおりです。

import {App, Platform} from 'ionic-angular'; 
import {StatusBar} from 'ionic-native'; 
import {HomePage} from './pages/home/home'; 


@App({ 
    template: '<ion-nav [root]="rootPage"></ion-nav>', 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
export class MyApp { 
    rootPage: any = HomePage; 

    static get parameters() { 
    return [[Platform]]; 
    } 


    constructor(platform: any) { 
    this.rootPage = HomePage; 

    platform.ready().then(() => { 
     // Okay, so the platform is ready and our plugins are available. 
     // Here you can do any higher level native things you might need. 
     StatusBar.styleDefault(); 
    }); 
    } 

} 

マイhome.ts：

import {App, Platform} from 'ionic-angular'; 
    import {StatusBar} from 'ionic-native'; 
    import {Network, Connection} from 'ionic-native'; 
    import {Page} from 'ionic-angular'; 



    @Page({ 
     templateUrl: 'build/pages/home/home.html', 
    }) 

    export class HomePage { 
     rootPage: any = HomePage; 

     navigator = navigator; 

     constructor(public platform: Platform) { 
     this.platform = platform; 
     } 


     checkNetwork() { 

     this.platform.ready().then(() => { 
      // Problem1 
      var networkState = navigator.connection.type; 

      var states = {}; 
      states[Connection.UNKNOWN] = 'Unknown connection'; 
      states[Connection.ETHERNET] = 'Ethernet connection'; 
      states[Connection.WIFI] = 'WiFi connection'; 
      states[Connection.CELL_2G] = 'Cell 2G connection'; 
      states[Connection.CELL_3G] = 'Cell 3G connection'; 
      states[Connection.CELL_4G] = 'Cell 4G connection'; 
      states[Connection.CELL] = 'Cell generic connection'; 
      states[Connection.NONE] = 'No network connection'; 

      alert('Connection type: ' + states[networkState]); 

     }); 

     } 

    } 

マイhome.html

<ion-navbar *navbar> 
    <ion-title> 
     Home 
    </ion-title> 
</ion-navbar> 

<ion-content class="home"> 
    <button (click)="checkNetwork()">Check Network</button> 
</ion-content> 

私は1つのエラーを受け取り、私は全く理解できません理由：

1 - Property 'connection' does not exist on type 'Navigator' 

更新：

ネイティブ：アクセスしようとした

import {Platform, Page} from 'ionic-angular'; 
import {Connection} from 'ionic-native'; 
import {Network} from 'ionic-native'; 

@Page({ 
    templateUrl: 'build/pages/home/home.html', 
}) 

export class HomePage { 
    rootPage: any = HomePage; 

    constructor(public platform: Platform) { 
    this.platform = platform; 
    } 


    checkConnection() { 
    console.log("entrou"); 

    console.log(Network); 

    // watch network for a disconnect 
    let disconnectSubscription = Network.onDisconnect().subscribe(() => { 
     console.log('network was disconnected :-(') 
    }); 

    // stop disconnect watch 
    disconnectSubscription.unsubscribe(); 



    // watch network for a connection 
    console.log("watch network"); 
    console.log("Conexao" + Network.connection); 
    let connectSubscription = 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(() => { 
     console.log(Network.connection); 
     if (Network.connection === Connection.WIFI) { 
      console.log('we got a wifi connection, woohoo!'); 
     } 
     }, 3000); 
    }); 

    console.log("Sub" + connectSubscription); 
    // stop connect watch 
    connectSubscription.unsubscribe(); 
    } 
} 

は、私が言って、コンソールメッセージが表示されます：私はこのようになりイオン2サイトに行って、現在、私のhome.tsファイル

ネットワークプラグインは使用できません。また

にcordova plugin add cordova-plugin-network-information ...

を接続するプラグインが正しくインストールされていないように思え

Answer 1

をcordova.jsを含めるか、またはデバイス/シミュレータで実行するようにしてください。この行が何をしているのですか？

navigator = navigator;

Answer 2

NPM npm install @types/cordova-plugin-network-information --saveを使用して活字体の定義を追加します。 動作しない場合は、navigator.connection.typeの代わりにNetwork.typeを使用してください。