I searched for the solution, but didn't find any match in this case.
I have created a page called "entertainment" and inside that I have created two other pages called "monthly" and "special" inside the entertainment folder. FYI, the folder structure is look alike this.
The entertainment page's route look like as follows.
const routes: Routes = [
{
path: '',
component: EntertainmentPage
},
{
path: 'monthly',
loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
},
{
path: 'special',
loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
}
];
Also the tab view looks like as follow.
<ion-tabs >
<ion-tab-bar slot="bottom" style="width: 100% !important;">
<ion-tab-button tab = 'monthly'>
<ion-icon name="fast-food"></ion-icon>
<ion-label>Food</ion-label>
</ion-tab-button>
<ion-tab-button tab = 'special'>
<ion-icon name="beer"></ion-icon>
<ion-label>Alcohol</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
But when I clicked on a given tab the page is loaded and the undelying tab is gone . Any suggestion on this please. Thanks in advance.
Found the solution with the help of @Mostafa
So what I just missed is, add each and every tab route as child route.
{
path: '',
component: EntertainmentPage,
children:[
{
path: '',
redirectTo: 'monthly',
pathMatch: 'full'
},
{
path: 'monthly',
loadChildren: () => import('./monthly/monthly.module').then( m => m.MonthlyPageModule)
},
{
path: 'special',
loadChildren: () => import('./special/special.module').then( m => m.SpecialPageModule)
},
]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.