ionic-framework - ionic 2アラートがWebページで機能しない

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

score 1 · Accepted Answer

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>

score 0 · Accepted Answer

私は ionic2 にも取り組んでおり、既存のアプリケーションに「ポップアップ」ウィンドウを実装する必要がありました。私はそのために多くのことを試みましたが、私の仕事は達成されませんでした。最終的に私はこのようなことをしました-

ポップアップ.html
<button block dark (click)="showAlert()">Help Window</button>

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

そして、それは私にとってはうまくいきます。

それがあなたにとってもうまくいくことを願っています。

score 0 · Accepted Answer

これを試して：

このフォルダとファイルの構造で

の：

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

score -1 · Accepted Answer

まだ準備ができていないようです...

コードの調査

        this.nav.present(alert);

ここを通過して戻ります：

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

ionic-framework - ionic 2アラートがWebページで機能しない

4 に答える 4

Related

Reference