Question

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

用户将在表单页面上，当他回去时，我需要进行"are you sure you want to discard you alterations?"之类的验证，当他点击是或否时，它将执行一个函数，然后离开页面。 / p>

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

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

所以我需要做的是：

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

执行与用户交互的功能，然后弹出页面

2 个答案: