Hello all,
I am working on my first Ionic project and I need to have a working side menu and tabs project where each tab has a primary page but may have many pages under it. The general idea can start with this:
The problem is when you switch pages from the side menu, the tab bar goes away because you are pushing a child page to the nav controller which is not called through the TabsPage (as shown in the video demo in the link above). Pushing TabsPage to the nav controller first works, but it causes an extra load, puts something else in the history, and isn’t correct. I imagine you have to send the page to the Tabs page and set the active tab to where the child page “lives” but I’m not seeing how to do that without having the navigation hit the Tab’s root page.
Can anyone point me in the direction of how best to accomplish this?
Thanks!
I ended up tabling this for a while and now have done a bunch more research without much luck.
There are a lot of posts by others on the topic and most point back to the conference app, which does not work in the same way I’m trying to use it.
The conference app has a working example of side menu and tabs together but it breaks down when you try to use it in the same way I am. To expose this in a quick and dirty way, add this line into appPages in app.component.ts:
{ title: 'Special Session', component: SessionDetailPage, tabComponent: SchedulePage, index: 2, icon: 'megaphone'},
This acts as though you were trying to get to a detail view from the side menu while keeping the tabs.
I’m not entirely sure if this is complicating things (I don’t think so) but my rootPage is actually set to my LoginPage initially until the user has been authenticated, then it is switched to TabsPage.
Nate
I finally got around to fixing this and figured I’d share the solution along with a better description:
Hierarchically, there is the Tabs page, then a “root” page for each tab which may have a side menu. Under that root page, there is more content accessible. In my app, the side menu contains content specific to the tab you are currently in.
When you click the side menu, it should keep the tab and just jump to a different view in the tab.
To accomplish this, I did the following:
In app.component.ts I used Events.publish to send an event with the page or necessary data from the click.
In the “root” page below tabs that has my tab specific menu, I subscribed to the event and added a handler to take the appropriate action.
Hope this helps someone else!
3 Likes
could you please show me the code of your app.component.ts ? and the other code to fix this problem ?
1 Like
nalmgren,
This is a solution I need, but I’m not sure how to implement. Do you have any code available?
Thanks