9

alert前のページに戻る前に、ユーザーが閉じる必要があるをどのように表示しますか? 標準の<ion-navbar *navbar> 矢印ボタンを使用しています。

NavControllerこのようにイベントにフックしようとしましたionViewWillLeaveが、うまくいきません:

ionViewWillLeave() {
  let alert = Alert.create({
    title: 'Bye',
    subTitle: 'Now leaving',
    buttons: ['OK']
  });
  this.nav.present(alert);
}

これはアラートを表示しますが、閉じられると元に戻りません。コメントアウトすると、戻るボタンが正常に機能します。

4

3 に答える 3

13

承認されたソリューションは RC3 では機能しません。Nav Controllerの Nav Guardを使用した新しいソリューションを次に示します。

ionViewCanLeave(): Promise<void> {
  return new Promise((resolve, reject) => {
    let confirm = this.alertCtrl.create({
      title: 'Are you sure?',
      message: 'Bunnies will die :(',
      buttons: [{
        text: 'OK',
        handler: () => {
          resolve();
        },
      }, {
        text: 'Cancel',
        handler: () => {
          reject();
        }
      }],
    });
    confirm.present();
  })
}

nav コントローラーで push() を使用してナビゲートしている場合は、catch も実行する必要があります。そうしないと、未処理のエラーがスローされます。

this.navCtrl.push(SomePage).catch(() => {});
于 2016-11-24T17:00:40.693 に答える
9

アップデート

Ionic2 RC の時点で、Nav Guardsを使用できるようになりました。

場合によっては、開発者がビューの出入りを制御できる必要があります。これを可能にするために、NavController にはionViewCanEnter およびionViewCanLeave メソッドがあります。Angular 2 のルート ガードに似ていますが、NavController とより統合されています。

これで、次のようなことができます。

someMethod(): void {
    // ...
    this.showAlertMessage = true;
}

ionViewCanLeave() {
    if(this.showAlertMessage) {
        let alertPopup = this.alertCtrl.create({
            title: 'Exit',
            message: '¿Are you sure?',
            buttons: [{
                    text: 'Exit',
                    handler: () => {
                        alertPopup.dismiss().then(() => {
                            this.exitPage();
                        });         
                    }
                },
                {
                    text: 'Stay',
                    handler: () => {
                        // need to do something if the user stays?
                    }
                }]
        });

        // Show the alert
        alertPopup.present();

        // Return false to avoid the page to be popped up
        return false;
    }
}

private exitPage() {
    this.showAlertMessage = false;
    this.navCtrl.pop();
}

this.showAlertMessageユーザーがページを終了しようとした場合にいつアラートを表示する必要があるかをより詳細に制御できるように、このプロパティを使用することを好みます。たとえば、ページにフォームがあり、ユーザーが変更を加えていない場合はアラート ( ) を表示せずthis.showAlertMessage = false、フォームが実際に変更された場合は警告 ( this.showAlertMessage = true)を表示したいとします。

古い答え

これに数時間苦労した後、解決策を見つけました。

私が直面しなければならなかった1つの問題はionViewWillLeave、が閉じられたときにも実行されるalertため、物事がより複雑になることです（view戻るボタンを押したためにが閉じようとすると、が表示されますが、[ OKalert ]をクリックすると起動しますイベントを再び開き、再びイベントを開きます...)。alert

心に留めておくべきもう 1 つのことは、ActionSheetsとAlertsが に追加されるnavigation stackためthis.nav.pop()、現在のビューをスタックから削除する代わりに を削除するalertことです (そのため、適切に動作していないと感じる場合があります)。

そうは言っても、私が見つけた解決策は次のとおりです。

import {Component} from '@angular/core';
import {NavController, NavParams, Alert} from 'ionic-angular';

@Component({
    templateUrl: 'build/pages/mypage/mypage.html',
})
export class MyPage{

    // ....

    confirmedExit: boolean = false;

    constructor(private nav: NavController, navParams: NavParams) {
        // ...
    }

    ionViewWillLeave() {
        if(!this.confirmedExit) {
            let confirm = Alert.create({
                title: 'Bye',
                message: 'Now leaving',
                buttons: [
                {
                    text: 'Ok',
                    handler: () => {
                        this.exitPage();
                    }
                }
                ]
            });
            this.nav.present(confirm);
        }
    }

    public exitPage(){
        this.confirmedExit = true;
        this.nav.remove().then(() => {
            this.nav.pop();
        });
    }


  }

そう：

  • 変数を使用して、confirmedExit既に [OK] ボタンをクリックしたかどうかを確認します (そのため、ページを終了することを確認しました。これにより、次にionViewWillLeaveイベントが発生したときに を表示する必要がないことがわかりますalert) 。
  • このexitPageメソッドでは、最初に をスタックからthis.nav.remove()削除し、alertそれが完了したらthis.nav.pop()前のページに戻るために を実行します。
于 2016-06-22T09:20:08.160 に答える