在Ionic 2中使用警报检查网络连接

Question

Trying to check network connection with an alert in Ionic 2. This tutorial is great but is now quite old and Ionic 2 syntax has changed since then. Etir in the comments mentioned editing the Alert component which I have done, but still outputting errors. Any ideas?

HomePage.ts

import {Component} from '@angular/core';
import {NavController, AlertController, Platform} from 'ionic-angular';

declare var navigator: any;
declare var Connection: any;

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

    constructor(private navCtrl: NavController, private platform: Platform, public alertCtrl: AlertController) { }

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

}

home.html

<ion-header>
    <ion-navbar>
        <ion-title>
            Ionic Network Check
        </ion-title>
    </ion-navbar>
</ion-header>

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

The errors being returned in home.ts

Cannot find name 'alertCtrl'- Line 26 Property 'present' does not exist on type 'NavController' - Line 31

Answer 1

There are a few typos in your page definition:

import {Component} from '@angular/core';
import {NavController, AlertController, Platform} from 'ionic-angular';

declare var navigator: any;
declare var Connection: any;

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

    constructor(private navCtrl: NavController, private platform: Platform, public alertCtrl: AlertController) { }

    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';

            // this. was missing
            let alert = this.alertCtrl.create({
                title: "Connection Status",
                subTitle: states[networkState],
                buttons: ["OK"]
            });

            // This is the proper way to present the alert
            alert.present();
        });
    }

}

The component docs give a full example:

https://ionicframework.com/docs/v2/components/#alert