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

Question

当设备没有摄像头时，我想在 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

Answer 1

在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>

Answer 2

好像还没有准备好...

调查代码

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

Answer 3

我也在研究 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);
       }
   }
   

这对我来说很好用。

希望它也对你有用。

Answer 4

试试这个：

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

在：

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