Manage Child routes based on parent route param

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…!

can you make a more complete demo? It’s hard to know the issue and help without it

Hi,
Thank you so much for your response.

Let me give you more details to you.

My application has the following hierarchy:

root (App Component) -- (Routing managed as per app.routing.module.ts)
|
|---- Child (Folder Component) -- (Routing managed as per folder.routing.module.ts)
          |
          |--- Child-1 (Home.Component)
          |
          |--- Child-2 (Orders.Component) So on...

I have two <ion-router-outlets> defined

  1. router-outlet defined in app.component.html would bootstrap Folder Component.
  2. router-outlet defined in folder.component.html would bootstrap Home / Orders Components based on parent route.

app.component.html is as below (Also find screenshot attached below):

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-content>
        <ion-list id="inbox-list">
          <ion-list-header>Admin</ion-list-header>
          <ion-note>blacktie1@gmail.com</ion-note>

          <ion-menu-toggle auto-hide="false" *ngFor="let p of userList; let i = index">
            <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>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

ScreenShot for app.component.html:

app.routing.module.ts is as below:

const routes: Routes = [
  {
    path: '',
    //Home being ':id' in the route -> 'folder/:id'
    redirectTo: 'folder/Home',
    pathMatch: 'full'
  },
  {
    path: 'folder/:id',
    loadChildren: () => import('./folder/folder.module').then( m => m.FolderPageModule),
  }
]

folder.component.html is as below:

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-menu-button></ion-menu-button>
  </ion-buttons>
  <ion-title style="margin-right: 3rem;">{{ folder }}</ion-title>
</ion-toolbar>

<ion-content>
  <ion-router-outlet></ion-router-outlet>
</ion-content>

folder.routing.module.ts is as below:

const routes: Routes = [
  {
    path: '',
    component: FolderPage,
    children: [
      {
        path: 'Home',
        component: HomeComponent
      },
      {
        path: 'Orders',
        component: OrdersComponent
      },
      {
        path: '',
        redirectTo: 'Home',
        pathMatch: 'full'
      }
    ]
  }
]

On ionic serve following happens:

Problem: an extra ‘Home’ gets appended at the end of URL and Home Component is bootstrapped in the Folder Component

On selecting other item from side menu following happens (ex: selecting 'Orders):

app.routing.module.ts triggers localhost:8100/folder/Home (where ‘Home’ being ‘:id’ in the url)
further, folder.routing.module.ts appends extra ‘Home’ to URL
(making it: localhost:8100/folder/Home/Home)

I want to know if there is any way to restrict appending extra parameter to URL in child route and use the ‘:id’ passed from app.component to folder.component to trigger routes defined in folder.routing.module.ts

In nutshell following is what I’m trying to achieve:

Parent Route triggers --> /folder/:id (ex: localhost:8100/folder/Home)
Child Route should read ‘:id’ (ex: Home in this case) and match it with the child routes defined and bootstrap corresponding component (in this case Home Component should be bootstrapped in Folder component).

I Hope, this helps to better understand my use case.

Also please find relevant project files in the github repo:

Please provide an actual working demo, not just some files to look at.