执行一个函数与用户交互，然后弹出一个页面

Question

我在文档中试图找到一种方法来执行以下操作：

用户将在表单页面上，当他返回时，我需要像"are you sure you want to discard you alterations?" 那样进行验证，当他单击是或否时，它将执行一个功能，然后离开页面。

我知道我可以使用Platform.registerBackButtonAction() 来检查他何时单击硬件后退按钮，但我怎样才能对标题上的 NavControll 后退按钮执行相同操作？

我可以使用 NavGuards，它在 NavControll 后退按钮上自动实现，但它会离开页面，然后执行该功能。

所以我需要做的流程是：

enter page >> write something on any input >> if it tries to leave the page open the check alert >> on clicking 'yes' it leaves the page

这是我正在做的一段代码：

ionViewCanLeave() {
    let a = this.alerts.create({
        title: "Confirmation message?",
        buttons: [{
            text: 'Nop',
            handler: () => {
                this.navCtrl.pop();
            }
        }, {
            text: 'Yes',
            handler: () => {
                this.salvarDescricao();
            }
        }]
    });

    if (this.changes != undefined && this.changes!= '') { //just a check i do, if the user doesn't change anything i don't need to ask
        a.present();
    } else {
        this.navCtrl.pop(); //if nothing changes it pops twice
    }
}

那么我该如何实现呢？如何防止用户离开视图、执行代码并依赖于它离开的结果？

谢谢:)

Answer 1

这样的事情呢？

public someMethod(): void {
    // in this method the input was modified
    // ...
    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;
    }

    return true;
}

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

我假设页面已被推送。如果此页面设置为 root，您可以将行 this.navCtrl.pop(); 替换为 this.navCtrl.setRoot(someOtherPage);

Answer 2

按照documentation，可以这样实现

ionViewCanEnter(): boolean{
   // here we can either return true or false
   // depending on if we want to leave this view
   if(isValid(randomValue)){
      return true;
    } else {
      return false;
    }
  }