CODEWITHSUNDEEP
angular-routerionic4
user1622801
user1622801

Reputation: 31

ionic 4 Tabs navigation navigate forward

Does anyone have any luck on navigating to the next page in a tabs page without losing the tab bar? I didn't manage to find any working sample online.

Upvotes: 1

Views: 1284

Answers (2)

user1622801
user1622801

Reputation: 31

I managed to get it working, just put the new page in the tabs children array. Then when navigate, the link will be '/tabs/(outlet:child2)' where the outlet is the view you wish the page push into. Good lord, there is no documentation on this.

Upvotes: 1

Andrew Serie
Andrew Serie

Reputation: 19

If you are referring to plain navigation with tabs, it follows a (outlet:path) style.

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: '',
                redirectTo: '/tabs/(home:home)',
                pathMatch: 'full',
            },
            {
                path: 'home',
                outlet: 'home',
                component: HomePage
            },
            {
                path: 'contact',
                outlet: 'contact',
                component: ContactPage
            },
            {
                path: 'settings',
                outlet: 'settings',
                component: SettingsPage
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
    }
];

I still have not figured out nesting. Ex: /tabs/(settings:settings/about) where about page/component is a child route for settings.

May I ask how you achieved navigating to a "next page" after a tab page?

Sources: https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/

Upvotes: 0

Related Questions