Углового 2 комплекс вложенной маршрутизации

Question

Я обновляю Угловое 2 приложение из 2.0.0-beta.0 до 2,4

У меня есть сложный маршрут, со многими переработаны компонентами, имеющими несколько детей; Приведу упрощенный пример:

└─Home 
    ├─Company 
    | ├─Requests 
    | └─Users 
    | ├─Subscriptions 
    | | └─Requests 
    | └─Requests 
    ├─Users 
    | ├─Subscriptions 
    | | └─Requests 
    | └─Requests 
    └─Subscriptions 
    └─Requests 

Как вы можете видеть, компонент пользователей, и компонент подписки (с соответствующими детьми) используются несколько раз, а модуль запроса также является дочерним пользователей и компаний по отдельности ,

Это было просто в бета-версии 0, поскольку компоненты могли иметь свою собственную раздельную маршрутизацию. Однако я не смог найти хороший способ сделать это в текущей версии Angular. Я мог бы превратить каждый повторно используемый компонент с детьми в модуль с загрузочным компонентом, но это добавляет гораздо больше кода и не будет очень гибким.

Есть ли способ сделать это, не создавая каждый повторно используемый компонент с дочерними модулями?

Answer 1

Я решил это, поместив этот код в каждом из моих компонентов:

в foo.component.ts:

import { BarComponent } from './bar.component' 
export const FooRouting: Routes = [ 
    { path: 'Bar', component: BarComponent } 
] 

и в home.ts (модуль)

import { FooComponent, FooRouting } from './foo.component' 
import { BarComponent } from './bar.component' 

@NgModule({ 
    imports: [ 
     ... 
     RouterModule.forRoot([ 
      { path: '', component: FooComponent, children: FooRouting } 
      { path: 'Bar', component: BarComponent } 
     ]) 
     ... 
    ], 
    ... 
)} 

:

└─Home 
    ├─Foo 
    | └─Bar 
    └─Bar 

Answer 2

Как насчет простого использования 'children' + 'redirectTo'?

const routes: Routes = [ 
    { path: '', pathMatch: 'full', component: HomeComponent }, 
    { path: 'company', children: [ 
    { path: '', pathMatch: 'full', component: CompanyComponent}, 
    // path '/company/requests' will redirectTo '/requests' 
    { path: 'requests': redirectTo: '/requests' }, 
    { path: 'users': redirectTo: '/users' }, 
    ]}, 
    { path: 'users', children: [ 
    { path: '', pathMatch: 'full', component: UsersComponent }, 
    { path: 'subscriptions', redirectTo: '/subscriptions' }, 
    { path: 'requests', redirectTo: '/requests' } 
    ]}, 
    { path: 'subscriptions', children: [ 
    { path: '', pathMatch: 'full', component: SubscriptionsComponent }, 
    { path: 'requests', redirectTo: '/requests' }, 
    ]}, 
    { path: 'requests', component: RequestsComponent }, 
];