Question

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

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

在Ionic 2中通过警报检查网络连接

1 个答案: