How to pass query params or use child/nested routes in tabs?

Ionic Framework Ionic Angular
1

Hi,

I am having trouble figuring out how to have tabs that point to nested routes, or how to pass query parameters through the URL in Ionic 4 + Angular.

If I have tab routes like:

export const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'posts',
                children: [
                    {
                        path: '',
                        loadChildren: '../posts/posts.module#PostsModule'
                    }
                ]
            },
            {
                path: 'users',
                children: [
                    {
                        path: '',
                        loadChildren: '../users/users.module#UsersModule'
                    }
                ]
            }
        ]
    }
]

and tabs.html:

<ion-tabs>

    <ion-tab-bar slot="bottom">

        <ion-tab-button tab="posts">
            <ion-label>Posts</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="users">
            <ion-label>Posts</ion-label>
        </ion-tab-button>
        
    </ion-tab-bar>

</ion-tabs>

it all works as expected. However I am looking to achieve something like this:

<ion-tabs>

    <ion-tab-bar slot="bottom">

        <ion-tab-button tab="posts/123">
            <ion-label>Post X</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="posts/456">
            <ion-label>Post Y</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="users/789">
            <ion-label>User Z</ion-label>
        </ion-tab-button>

    </ion-tab-bar>

</ion-tabs>

In this instance the tab will load, however the tab label and icon will not be styled as being the active tab.

If I do the following:

<ion-tabs>

    <ion-tab-bar slot="bottom">

        <ion-tab-button tab="posts" [routerLink]="['posts', 123]">
            <ion-label>Post X</ion-label>
        </ion-tab-button>

        <ion-tab-button tab="users" [routerLink]="['users', 456]">
            <ion-label>User Y</ion-label>
        </ion-tab-button>
        
    </ion-tab-bar>

</ion-tabs>

The posts/123 page will flash briefly, be being replaced with posts page.

The href attribute described in the Ionic documentation appears to do nothing.

Thanks.