ionic 2警报在网页上无法使用

Question

我想在设备没有摄像头时提醒Ionic2警报。

当我启动：离子服务

然后我尝试以显示信息如下：

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

似乎还没有准备好......

调查代码

 this.nav.present(alert); 

是路过此地，并返回：

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

Answer 2

在警报.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 3

我也在研究ionic2，并且需要在我现有的应用程序中实现“PopUp”窗口。 我尝试了很多的通过没有得到我的任务完成，最后我不喜欢的东西这个 -

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

2. 弹出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> 

In：

回家。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