使用Ionic v2离开页面(向后导航)之前发出警报

Question

alert在返回上一页之前,如何显示用户必须关闭的内容？我正在使用标准<ion-navbar *navbar> 箭头按钮.

我尝试像这样挂钩NavController事件ionViewWillLeave,但它不起作用:

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

这会显示警报,但一旦关闭就不会返回.如果我发表评论,后退按钮工作正常.

Answer 1

接受的解决方案在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();
  })
}

如果您使用导航控制器上的push()进行导航,则还需要对其进行捕获,否则会抛出未处理的错误:

this.navCtrl.push(SomePage).catch(() => {});

Answer 2

UPDATE

从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属性,因此如果用户试图退出页面,我们可以更好地控制何时需要显示警报.例如,我们可能在页面中有一个表单,如果用户没有进行任何更改,我们不希望显示alert(this.showAlertMessage = false),如果表单实际更改,我们要显示警告(this.showAlertMessage = true)

老答复

经过几个小时的努力,我找到了解决方案.

我必须面对的一个问题是,ionViewWillLeave当alert关闭时也会执行,这样会使事情变得更复杂(当view你按下后退按钮时,即将关闭,alert显示,但是当你点击确定时,会触发事件再次打开alert,等等......).

要记住的另一件事是,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()返回上一页.