child component with tabs not getting correct ID - ionic/angular

I am new to ionic, and I am trying to design a simple app to learn. I have a main page (MP), and when i click on a button on that page, I get forwarded to a new page (AP) and I have tabs. My tabs has two buttons. First button would just show that page I just got redirected to (AP). The other button goes to another page (BP) some more content associated with the first one.

this is my route:

const routes: Routes = [
{
path: '',
loadComponent: () =>
import('./main/main.page.component').then((m) => m.MainPage),
},
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'book/:id', // dynamic route for story details
loadComponent: () =>
import('./story/story.component').then((m) => m.StoryComponent),
},
{
path: 'review/:id',
loadComponent: () =>
import('./practice/practice.component').then((m) => m.PracticeComponent),
},
{
path: '',
redirectTo: '/tabs/main',
pathMatch: 'full',
},
],
},
];


This is my tabs page:

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button [href]="getBookTabHref()">
<ion-icon aria-hidden="true" name="book-outline"></ion-icon>
<ion-label>Book</ion-label>
</ion-tab-button>

<ion-tab-button [href]="getReviewTabHref()">
<ion-icon name="square"></ion-icon>
<ion-label>Review</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>


So from my main page I go to Book just fine, and I shows the correct ID. But when, from there, I try to use the tabs buttons, it does not have the ID state. I have tried a few things with the help of chatgpt, like

activeRoute.params.subscribe((params) => {
this.id = params['id'];
console.log('subscribe (after navigation end)', this.id);
});,


but nothing works and my ID is lost.

What is the best practice and how do I retain that state in an app? I come from a web world, so this concept is a bit strange to me..

thanks!

Continue reading...