ionic2

Question

ich dieses Tutorial sehe Netzverfügbarkeit in ionic2 zu bestimmen: https://www.thepolyglotdeveloper.com/2016/01/determine-network-availability-in-an-ionic-2-mobile-app/

Aber meine Frage ist: es gibt einen Weg, um den Dialog zu zeigen, „automatisch“, wenn die Netzwerkstatusänderung (ohne beobachtbare .Zeitraum())?

Danke!

Answer 1

In der Dokumentation der Network Information plugin können Sie sehen, dass das Plugin 2 Ereignisse ausgibt: "offline" wenn das Gerät offline geht und "online" wenn die Geräte online gehen. Diese zwei Ereignisse können wir verwenden, um Observables zu erstellen. In dieser HomePage mache ich 2 Observables und im subscribe mache ich Funktionen um Alerts anzuzeigen. Zuerst brauche ich das Observable von rxjs und die Methode fromEvent muss ebenfalls importiert werden.

import {Page, Alert, NavController} from 'ionic-angular'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/fromEvent'; 

@Page({ 
    templateUrl: 'build/pages/home/home.html' 
}) 
export class HomePage { 

constructor(public nav:NavController) { 
    var offline = Observable.fromEvent(document, "offline"); 
    var online = Observable.fromEvent(document, "online"); 

    offline.subscribe(() => { 
     let alert = Alert.create({ 
      title: "Connection", 
      message: "You are offline!" 
     }); 
     nav.present(alert); 
    }); 

    online.subscribe(()=>{ 
     let alert = Alert.create({ 
      title: "Connection", 
      message: "You are online!" 
     }); 
     nav.present(alert); 
    }); 
    } 
} 

Answer 2

entschied ich mich für Veranstaltungen zu gehen (https://ionicframework.com/docs/v2/api/util/Events/) statt:

constructor(private events: Events, private alertCtrl: AlertController) { 
    this.platform.ready().then(() => { 
     this.watchForNetworkChanges(); 
}); 

watchForNetworkChanges() { 
    // Watch network for a connection 
    Network.onConnect().subscribe(() => { 
    this.events.publish('network:connected', true);  
    }); 

    Network.onDisconnect().subscribe(() => { 
    this.events.publish('network:connected', false); 
}); 

Und in jedem anderen Ort, den ich auf diese Ereignisse abonnieren mit Netzzustandsänderung beschäftigen:

this.events.subscribe('network:connected', (status) => { 
    let connected = status[0] === true; 

    if (!connected) { 
    let alert = this.alertCtrl.create({ 
     title: 'No Internet', 
     message: "You are offline!" 
     buttons: ['OK'] 
    }); 

    alert.present(); 
    } 

    this.isConnected = connected; 
} 

Answer 3

I wie der beobachtbare Weg in Angular2. Aber die Ereignisse offline, online sind im Fensterobjekt nicht im Dokument.

Online_and_offline_events

Hoffe, es hilft ...

console.log(navigator.onLine); 

let offline = Observable.fromEvent(window, 'offline'); 
let online = Observable.fromEvent(window, 'online'); 

    offline.subscribe(() => { 
     console.log(navigator.onLine); 
    }); 

    online.subscribe(() => { 
     console.log(navigator.onLine); 
    }); 

Answer 4

checkNetwork() { 
    this.platform.ready().then(() => { 
     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'; 
     let alert = this.alertCtrl.create({ 
      title: "Connection Status", 
      subTitle: states[networkState], 
      buttons: ["OK"] 
     }); 
     alert.present(); 
    }); 
}