Угловая 2 Маршрутизация с вложенными состояниями

Question

У меня есть приложение AppRoutingModule и HomeRoutingModule ниже. Первый содержит некоторые пути и импортирует остальные пути из HomeRoutingModule. Моя проблема в том, как я могу получить departmentId внутри HomeComponent? На самом деле мой полный путь должен быть:

• 'домена: отделы /: DepartmentID/доходность'
• 'домен: отделы /: DepartmentID/loadFactor'
• ...

В каждый случай мне нужно обновить только departmentId в моем 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' } 
]; 

Answer 1

Вы должны написать, как это в обоих файлов маршрутизации нравится. В AppRoutingModule запишите «отделы» вместо дома.

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 } 
]; 

И в HomeRoutingModule, Удалить "отделы" слова после того, как пути: ...

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' } 
]; 

Я надеюсь, что это будет работать для вас.

С благодарностью