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的导航卫队的新解决方案：

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

如果你在导航控制器上使用push（）导航，你还需要捕获它，否则会抛出一个未处理的错误：

driver.get(url)
page_source = driver.page_source  # This gives you a 'str' containing the html source
print(page_source)

Answer 2

<强>更新

从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）

OLD ANSWER

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

我不得不面对的一个问题是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变量来确定您是否已经点击了确定按钮（因此您确认要退出该页面，并且我知道下次ionViewWillLeave事件被触发时，我不必显示alert）
在exitPage方法中，我首先this.nav.remove()从堆栈中删除alert，一旦完成，我们执行this.nav.pop()返回上一页。

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

2 个答案: