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

正在尝试使用Ionic 2中的警报检查网络连接。很好，但是现在已经很旧了，而且从那时起，Ionic 2的语法已经改变了。Etir在评论中提到编辑警报组件，我已经这样做了，但仍然输出错误。有什么想法吗

主页.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行

---

属性“present”在类型“NavController”上不存在-第31行

页面定义中有一些输入错误：

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

}

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

---

错误已经消失，但现在得到了一个空白的白色screen@merch89控制台中是否有错误？已修复，@Component refs不正确。从过时的教程中提取。正在工作，谢谢。此解决方案可用于跟踪网络连接中的更改。在初始加载应用程序时，是否有其他方法检查连接状态