Search code examples
navigationionic2guard

Benefit of using ionic2 ionViewCanLeave Navigationguard to respond to alert to stay or leave page


Can't see the point at present to use such a navigationguard because we don't know about the target page to navigate to (active page info is avaible from the navController getActive() method). Typically we'll be using an alert to ask the question "Do you really want to leave this page?" in response to a menu option being selected for example and on OK, as far as I can tell, we don't know which page to "setRoot" to as the target page because the ionViewCanLeave handler has no parameters such as toPage/enteringPage.

Has anyone managed to do this yet or rather find out from the navigation objects in ionic2 target page information?

Here a little code to set context:

ionViewCanLeave(): boolean { // no parameters on offer :-( 
    let result: boolean = false;
    let alert: Alert = this._alertCtrl.create({
      title: 'Are you sure you want to leave..?',
      message: 'Your changes will be lost if you do?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            let dismiss: boolean = true;
            return dismiss;
          }
        },
        {
          text: 'OK',
          handler: () => {
            let dismiss: boolean = false;
            let alertPop = alert.dismiss();
            alertPop
              .then(() => {
                let rootNav: NavController = this._appCtrl.getRootNav();
                this._navCtrl.pop();
                this._navCtrl.setRoot(DashboardPage); // Here we want to parameterize to target page - hardcoded for now
              });
            return dismiss;
          }
        }
      ]
    });
    if (this._applicationService.getOfferStatus() === OfferStatus.live) {
      alert.present();
    }
    return result;
  }


Solution

  • Not 100% sure that I understand the question... However as far as I understand you need to prevent the user navigating to some page based on some condition. For example, on the edit form i have the below

      ionViewCanLeave() {
        // here we are checking if the dialog is being closed and there are unsaved changes
        if (!this.saved && this.form.dirty) {
          return new Promise((resolve: Function, reject: Function) => {
            this.dialogs.showConfirmDialog('You have unsaved changes. Do you want to close and discard your changes?', null, null, 'confirm-warning-dialog')
              .then((confirmed) => {
                if (confirmed) {
                  resolve();
                } else {
                  reject();
                }
              });
          });
        }
      }
    

    This checks that if the form has not been saved and there have been any changes made it shows a confirmation dialog. If in this dialog cancel is clicked it prevents navigation, otherwise it allows navigation. ionViewCanLeave does not navigate itself but works as a handler when the user leaves the page. hope this helps