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!
4
Why you can’t get the ID parameter
The parameters must be read in the component that the route points to. The route ‘tabs’ has no ID parameter. The parameter must be read in the component StoryComponent or PracticeComponent.
Solution 1: Use query parameters
Adjust the URL so that the ID is specified as a query parameter:
/tabs/book?id=123
Then the ID can be read as follows:
this.route.queryParams.subscribe((params) => {
this.id = params['id'];
});
Solution 2: Specify the ID in the tabs route
Adjust your route as follows:
/tabs/123/book
const routes: Routes = [
{
path: '',
loadComponent: () =>
import('./main/main.page.component').then((m) => m.MainPage),
},
{
path: 'tabs/:id', // <= id param here
component: TabsPage,
children: [
{
path: 'book', // dynamic route for story details
loadComponent: () =>
import('./story/story.component').then((m) => m.StoryComponent),
},
{
path: 'review',
loadComponent: () =>
import('./practice/practice.component').then((m) => m.PracticeComponent),
},
{
path: '',
redirectTo: '/tabs/main',
pathMatch: 'full',
},
],
},
];
The ID can then be read in the TabsPage as follows:
this.route.params.subscribe((params) => {
this.id = params['id'];
});
The ID can then be read in the child routes as follows:
this.route.parent?.params.subscribe((params) => {
const id = params['id'];
})
3