How can I use navigation protection when changing tabs in Ionic?

Question

I use Ionic 2. I have an opinion that the user should be asked to confirm that they want to leave when navigating (the video is playing at that time, and this is probably random navigation).

I have this job when the user presses the back button in the top navigation bar or back to the hardware button (Android) using the following code:

// About to leave ionViewCanLeave() { this.api.getDefaultMedia().pause(); return new Promise((resolve, reject) => { if(!this.allowedToLeave) { let confirm = this.alertCtrl.create({ title: 'Are you sure?', message: 'If you leave a class you will need to start over. Are you sure you want to leave? If you need a break you can pause by tapping the video.', buttons: [{ text: 'OK', handler: () => { this.allowedToLeave = true; resolve(); }, }, { text: 'Cancel', handler: () => { reject(); } }], }); confirm.present(); } }); } 

The view is on the tab. Clicking on another tab does not call this function, so the user is not prompted, and the tab simply switches.

How can I show this prompt in a tab? This view is not a root page tab.

-

I tried using ionViewWillLeave() , which is called when the tab changes, but it does not prevent the user from switching. The code below displays a prompt, but after changing the tab:

  // Called when user exits page via tab ionViewWillLeave() { this.api.getDefaultMedia().pause(); if(!this.allowedToLeave) { let confirm = this.alertCtrl.create({ title: 'Are you sure?', message: 'If you leave a class you will need to start over. Are you sure you want to leave? If you need a break you can pause by tapping the video.', buttons: [{ text: 'OK', handler: () => { this.allowedToLeave = true; this.leave(); }, }, { text: 'Cancel', handler: () => { // Do nothing } }], }); confirm.present(); return false; } } // Leave the view leave() { this.navCtrl.pop(); } 

Answer 1

I have a simple one-line solution for this, because ionViewCanLeave is not accessible for tabs. So what you need to do is throw a simple error from your ionViewWillLeave if you want to disable navigation :)

 ionViewWillLeave() { if (!this.isValidForm()) { this.showPrompt(); throw new Error('Form validation error!'); } } 

This error will be detected by the Ionic Framework view controller at the top of the tabs, which will stop navigation.

Answer 2

You do not need a promise for this, you just need to return true or false if the user can leave the page, so if he wants to leave and confirm this in the warning, you will set allowedToLeave to true and pop your page, it will again call ionViewCanLeave , but This time it will not go into your if statement.

  // About to leave ionViewCanLeave() { this.api.getDefaultMedia().pause(); if(!this.allowedToLeave) { let confirm = this.alertCtrl.create({ title: 'Are you sure?', message: 'If you leave a class you will need to start over. Are you sure you want to leave? If you need a break you can pause by tapping the video.', buttons: [{ text: 'OK', handler: () => { this.allowedToLeave = true; this.navCtrl.pop(); }, }, { text: 'Cancel', role: 'cancel' }], }); confirm.present(); }; return true; } 

Hope this helps.