How to define navigation for same state from different tabs


#1

I have a tabbed application with tabs such as Explore and Search. I also have attraction page which can be opened from both the Explore and Search tabs. How do I defined the attraction page state so it can be opened from both tabs and won’t change the active tab once the attraction state is being navigated to?


#2

In my book, Mobile App Development with Ionic, I show how to do this. The secret is the outlet that you define in the routing.

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      // Tab 1
      {
        path: 'parks',
        component: ParkListPage,
        outlet: 'parks'
      },
      {
        path: 'detail/:parkID',
        component: ParkDetailsPage,
        outlet: 'parks'
      },
      // Tab 2
      {
        path: 'map',
        outlet: 'map',
        component: ParkMapPage
      },
      {
        path: 'detail/:parkID',
        component: ParkDetailsPage,
        outlet: 'map'
      }
    ]
  },

I use the same ParkDetailPage from both the List and Map tabs.

Chris


#3

Thanks Chris but I think you missed the question is on ionic-v1


#4

Sorry, my v1 knowledge has been wiped away…