Angular 2 Routing with nested states

Question

I have this AppRoutingModule and HomeRoutingModule below. The first one contains some paths and imports the rest of paths from HomeRoutingModule. My problem is how can I get the departmentId inside HomeComponent? Actually my full path should be:

'domain:departments/:departmentId/profitability'
'domain:departments/:departmentId/loadFactor'
...

In each case I need to update only the departmentId in my url.

AppRoutingModule

const routes: Routes = [
{
    path: 'home',
    loadChildren: 'app/components/home/home.module#HomeModule',
    data: { preload: true }
},
{ path: '', redirectTo: 'home/departments/group/profitability', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

HomeRoutingModule

const homeRoutes: Routes = [
{
    path: 'departments',
    component: HomeComponent,
    children: [
        { path: ':departmentId/fabi', component: FabiComponent },
        { path: ':departmentId/loadFactor', component: LoadFactorComponent },
        { path: ':departmentId/otp', component: OtpComponent },
        { path: ':departmentId/profitability', component: ProfitabilityComponent },
        { path: ':departmentId/revenue', component: RevenueComponent },
        { path: ':departmentId/yield', component: YieldComponent }
    ]
},
{ path: '', redirectTo: 'home/departments/group/profitability', pathMatch: 'full' }
];

Ghanshyam Ghanshyam · Accepted Answer · 2017-08-25T08:58:16

You have to write like this in both routing files like. In AppRoutingModule, Write down "departments" instead of home.

const routes: Routes = [
{
    path: 'departments',
    loadChildren: 'app/components/home/home.module#HomeModule',
    data: { preload: true }
},
{ path: '', redirectTo: 'home/departments/group/profitability', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];

And in HomeRoutingModule, Remove "departments" words after path: ...

const homeRoutes: Routes = [
{
    path: '',
    component: HomeComponent,
    children: [
        { path: ':departmentId/fabi', component: FabiComponent },
        { path: ':departmentId/loadFactor', component: LoadFactorComponent },
        { path: ':departmentId/otp', component: OtpComponent },
        { path: ':departmentId/profitability', component: ProfitabilityComponent },
        { path: ':departmentId/revenue', component: RevenueComponent },
        { path: ':departmentId/yield', component: YieldComponent }
    ]
},
{ path: '', redirectTo: 'home/departments/group/profitability', pathMatch: 'full' }
];

I hope it will work for you.

Thanks

Angular 2 Routing with nested states

1 Answers