Reputation: 33
This is the example url :
localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/0
app-routing.module.ts
const routes: Routes = [
{
path: 'pages/users',
loadChildren: () => import('./@modules/users-dashboard/users-dashboard.module').then(mod => mod.UsersDashboardModule),
},
...
]
UsersDashboardRoutingModule
const routes: Routes = [
{
path: ':userId/dashboards',
loadChildren: () => import('../monitoring-levels/monitoring-levels.module').then( (module) => module.MonitoringLevelsModule)
},
{ path: '', component: PageNotFoundComponent },
{ path: '**', component: PageNotFoundComponent }
];
MonitoringLevelsRoutingModule
const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },
{ path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`},
{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];
MonitoringDashboardComponent
<ng-container [ngSwitch]="monitoringLevelID">
<level0-monitoring-dashboard *ngSwitchDefault></level0-monitoring-dashboard>
<level1-monitoring-dashboard *ngSwitchCase="1"></level1-monitoring-dashboard>
<level2-monitoring-dashboard *ngSwitchCase="2"></level2-monitoring-dashboard>
</ng-container>
With the example url(or with other example), I get a redirect to localhost:4202.
Other example :
localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/1
localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/
This works only with this modified :
MonitoringLevelsRoutingModule
const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },
{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];
or
const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },
{ path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`, pathMatch: 'full'}
{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];
Upvotes: 2
Views: 54