Skip Navigation history when user in ION-TAB

So here’s my solution.

I’m not a fan of working with rootScope, so I ended up using a custom back button action. I also restructured the tabs a bit, so that the nav-stack is correct.

It does need to be cleaned up a bit but hopefully this helps.

@mhartington, Thanks for your quick reply.

Here is code pen with your changes. http://codepen.io/mrvamsidhar/pen/Ckxlg .

I understood that you added custom back button at tab page. On click you are navigating simply to $state.go(‘app.welcome’);

But my problem is, I should not always navigate to ‘app.welcome’ page. It may change. I should always navigate to previous page.

For understanding I added couple of options to go to tab page. So, on click of “back” button, I should navigate exactly to the page from where i traversed.

I believe we should use $window here. Is it correct.

Let me know how should i get the page from where I navigated from. Thanks again.

Alright, so if I’m understanding right, if you go to that tab page, and navigate from one tab to another, you want to be able to cycle through that and then be able to go back to the welcome page (in this example)?

Am I correct?

You can get not only over welcome page to the tab-page.

So you can not simply navigate to app.welcome state if you click on back button on the tab-page.

But for that you can add an own variable to your routes (yes this is possible).

.state('...', {
   url: '...',
   canReachTabs: true
});

So if you listen to stateChangeStart event -> you can have a look.
If my “fromState” has “canReachTabs” = true and your “toState” = tab Page -> remember it as back state.

So there is no need to build in ugly state,name checks for a bunch of states.

@mhartington, I think I am confusing you. Let me explain again.

Let’s say,

  1. If user navigated from sign-in to tabpage => On click of back() button he should navigate back to Sign-in Page.
  2. If user navigated from welcome page to tabpage => On click of back() he should navigate back to Welcome page…
  3. If user navigated from Another page to tabpage => On click of back() he should navigate back to Another page.

Your solution works for me, But I need to take user back to page from where he traversed. How to get Previous Page?

Then All I should do is, replace $state.go(‘app.welcome’) with $state.go(previouspage)

Thanks.

@bengtler, Sorry I didn’t understood clearly, Can you explain little more?

You can add customData to your states (in your routing definition).

There you can set a flag to say -> okay i can navigate from this state to my tabPage.
With this you can check, if you navigate from a state to another -> has the current state the flag and is the next state my ionTab page -> recognize the currentState to handle back navigation in ionTab page.

With this you can avoid checks like

if ((fromState.name === 'blubb' || ... || ...) && toState.name ==='ION_TAB)

because you have a flag on states you want to check

if (fromState.canReachTabs && toState.name === 'ION_TAB')

@bengtler, Yep. i agree that. I will induce the same…

So are you convinced with my solution above? I still like with @mhartington solution. But I do not know how to traverse back to page from where user navigated from.

Today, I haven’t spend much time on this. I need to look in to this tomorrow. I will keep updated.

Thanks.

hmm. made some progress today. Found some thing even didn’t made much success.

In above code, we are using $state.go() on back().
I think using $state.go() is not good practise when navigating back to history. The reason is $state.go always add new page to stack if not exists. In cases like this, back navigation might get corrupt.
(While testing I found that, same page is opening twice when you click back button)

So I think using $window.history.go() is always safe bet.

Yep, it is only a part of data consisty like i described in some posts above:

You have to consider 2 history parts.

  1. your global app history and 2. your tab-history
    Everytime you are changing a tab -> you push that change to the history stack.

If you want to have a clean history stack, you have handle something like this, too:

  1. tab-1
  2. navigate to tab-2
  3. navigate to tab-3
  4. back to tab-1 -> there should be also a history.go.back(-2)

I think with your approach to handle tabs with states it is not recommended.
Tabs are tabs and states are states.

But good look with that.

Can you please provide the same answer for latest ionic version…ie. ionic3 & Angular4…I have raised the same question in this How to skip TabsComponent Page, when user clicks Back button(<) in Other page.