Tab Views within Nav Views with Navbar


#1

Hey everybody,

I just started out with Ionic and got stuck with trying to build the following navigation hierarchy:
I would like to have a navbar as main navigation for the app. It links to several views where each contains a list of items. When clicking on one of those items, it should take the user to the “single” screen of that item (URL contains item ID), providing more information on it. I have everything working up to this point.

Now I have the following problem: I would like the single screen to contain multiple tabs that all reference to information of the current item. All of those tabs should have unique URLs too. But now when I add the tabs and put a new <ion-nav-view> element inside each one, the app will obviously consider this view’s history, meaning there is no Back arrow in the navigation bar anymore (which however would be there if the single screen did not have any tabs). Is it possible to create some kind of sub-view that has a unique URL, but is not handled in the history?

For example:

  • I have an app.events state with URL /events
  • I have an app.event state with URL /events/:eventID which is abstract
  • I created two states for the tabs with URLs /info and /social respectively, so that #/events/:eventID/info links to the first one and #/events/:eventID/social to the latter
  • what I need is that the app.event state is considered the current state (so that I see a Back arrow in the navigation bar that would take me back to app.events), but I need to have unique URLs for the tabs as well; however I don’t care which tab the user is currently on; those tabs only inherit information of the app.event state

If anyone could give me a hint here, that would be great. I’m new to Ionic, so I haven’t gotten behind everything yet. :slight_smile: If you need more specific details or code samples, of course I can show them to you.