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

Question

尝试使用 Ionic 2 中的警报检查网络连接。This tutorial 很棒，但现在已经很老了，从那时起 Ionic 2 语法发生了变化。 cmets 中的 Etir 提到编辑我已经完成的 Alert 组件，但仍然输出错误。有什么想法吗？

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>

在 home.ts 中返回的错误

找不到名称“alertCtrl”- 第 26 行 'NavController' 类型上不存在属性'present' - 第 31 行

Answer 1

您的页面定义中有一些拼写错误：

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();
        });
    }

}

组件文档给出了一个完整的例子：

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