离子 2 警报在网页上不起作用

ionic 2 Alert not working on webpage

当设备没有摄像头时,我想在 Ionic2 上发出警报。

当我启动时:ionic serve

然后我尝试显示如下消息:

 let alert = Alert.create({
                title: 'Camera not found',
                subTitle: 'It seems your camera is not working on your device',
                buttons: ['Ok']
            });
            this.nav.present(alert);

我有一个 javascript 错误

Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: rootNav.getActive is not a function
ORIGINAL STACKTRACE:
TypeError: rootNav.getActive is not a function
    at Tab.NavController.present (http://localhost:8100/build/js/app.bundle.js:46996:36)
    at SmartScan.takePicture (http://localhost:8100/build/js/app.bundle.js:60864:23)
    at AbstractChangeDetector.ChangeDetector_SmartScan_0.handleEventInternal (eval at <anonymous> (http://localhost:8100/build/js/app.bundle.js:14578:17), <anonymous>:185:36)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:13892:25)
    at AppView.dispatchEvent (http://localhost:8100/build/js/app.bundle.js:18772:46)
    at AppView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:18766:22)
    at DefaultRenderView.dispatchRenderEvent (http://localhost:8100/build/js/app.bundle.js:33592:39)
    at eventDispatcher (http://localhost:8100/build/js/app.bundle.js:33258:22)
    at http://localhost:8100/build/js/app.bundle.js:33329:40

在alert.js中:

import {Page, Alert, NavController} from 'ionic-angular';

@Page({
templateUrl: 'build/pages/alert/alert.html'
})

export class AlertPage {
    static get parameters() {
        return [[NavController]];
    }
    constructor(nav) {
        this.nav = nav;
    }

    showAlert() {
        let alert = Alert.create({
            title: 'New Friend!',
            subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
            buttons: ['Ok']
        });
        this.nav.present(alert);

    }
}

在alert.html中:

<button block dark (click)="showAlert()">test</button>

好像还没有准备好...

调查代码

        this.nav.present(alert);

路过这里 returns :

if (rootNav['_tabs']) {
                // TODO: must have until this goes in
                // https://github.com/angular/angular/issues/5481
                void 0;
                return;
            }

我也在研究 ionic2,并且需要在我现有的应用程序中实现 "PopUp" window。 我为此尝试了很多,但没有完成我的任务,最后我做了这样的事情-

  1. pop-up.html
    <button block dark (click)="showAlert()">Help Window</button>

  2. pop-up.ts

    import { Component } from '@angular/core';
    import { Alert, NavController, NavParams} from 'ionic-angular';
    
    @Component({
      templateUrl: 'build/pages/pop-up/pop-up.html',
    })
    
    export class PopUpPage {
        static get parameters() {
          return [[NavController]];
        }
        constructor(private nav: NavController) {
          this.nav = nav;
        }
    
        showAlert() {
          let alert = Alert.create({
            title: 'Help Window!',
            subTitle: 'Mindfulness is here for you and your soul. We are intended to stablish your connection to All Mighty.',
            buttons: ['Cancle']
          });
          this.nav.present(alert);
        }
    }
    

这对我来说很好用。

希望它也对你有用。

试试这个:

具有这种文件夹和文件结构

在:

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Ionic 2 Notifications</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button block dark (click)="showAlert()">Alert</button>
</ion-content>

在:

home.ts

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

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

  constructor(public alertCtrl: AlertController) {
  }

  showAlert() {
    let alert = this.alertCtrl.create({
      title: 'New Friend!',
      subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
      buttons: ['OK']
    });
    alert.present();
  }

}

我从文档站点获得了以下信息: https://ionicframework.com/docs/v2/components/#action-sheets