How to use navGuard on tab change


#1

Hi, i want to use navGuard in ion-tab whenever user switch tab. But seem like ionViewCanLeave event was not fired when tab change. It only fire ionViewWillLeave event and i can not find any way to use nav guard in this event.

Any help would be appreciated. Many thanks.


#2

There is an open issue #11694 on this.

Personally, I consider nav guards virtually useless and prefer disabling whatever part of the UI would be disallowed by them, such as buttons and menu items. So if a particular tab is off-limits for whatever reason, I would disable that tab. If you’re in a situation where the user isn’t supposed to go anywhere until something happens, then I think you should consider using a modal for that. That’s what they’re for.


#3

Thanks for your reply. You are right in some cases. But in my case, it is similar with filling up form in a tab. If user leave the tab without save data, they will lost that data. So i think navGuard in this case is necessary.


#4

I don’t see why that should happen. If you are on tab A, and go to tab B and then back to A, A should be in the exact same state as it was left in, because it stays in the DOM the whole time.


#5

Yeah. But i want if they switch tab, it is meaning they are discarding the form and i will ask them “are you sure?”. Maybe it is a bad design…


#6

You said it first, but I agree. Tabs should be basically a glorified accordion, where opening or closing one should not affect another.


#7

Thank you. I think i should re-design my app now. :smiley: