Hello,
I’m working on Ionic 4 application with a collapsible side menu. My Side menu is defined in app.component.html.
Use Case: On selecting a menu item from side menu, the component routes to a page named ‘folder’ (in this case).
app.component.html:
<ion-item (click)="selectedIndex = i" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false" [class.selected]="selectedIndex == i">
<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label>{{ p.title }}</ion-label> </ion-item>
app.component.ts:
userList = [{
title: 'Home',
url: '/folder/Home',
icon: 'home'
},{
title: 'Orders',
url: '/folder/Orders',
icon: 'clipboard'
}]
app.routing.module.ts:
{
path: '',
redirectTo: 'folder/Home',
pathMatch: 'full'
}, {
path: 'folder/:id',
loadChildren: () => import('./folder/folder.module').then( m => m.FolderPageModule)
},
I have a <ion-router-outlet>
defined in folder.component.html, which should bootstrap home.component.ts or orders.component.ts based on the route from the parent.
Problem: When routing to /folder/Home noting is displayed but if routing URL is /folder/Home/Home then the home component is bootstrapped in folder page.
folder.routing.module.ts:
{
path: '',
component: FolderPage,
children: [
{
path: 'Home',
component: HomeComponent,
},
{
path: 'Order',
component: OrdersComponent
} ]
}
Expected Behavior: If parent route --> /folder/Home --> Home Component should be bootstrapped in folder page.
Need some workaround to identify route param from parent route and based upon that trigger the child route.
Thank you…!