Angular 2复杂的嵌套路由

Question

我正在将 Angular 2 应用程序从 2.0.0-beta.0 升级到 2.4

我有复杂的路由，有许多有多个子组件的重用组件；我举一个简单的例子:

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

如您所见，Users 组件和 Subscriptions 组件(及其子组件)被多次使用，Request 模块也是 Users 和 Company 的子组件。

这在 Beta 0 中很简单，因为组件可以有自己独立的路由。但是，我一直无法在当前版本的 Angular 中找到执行此操作的好方法。我可以将每个带有子组件的重用组件变成一个带有自举组件的模块，但这会增加更多的代码并且不会很灵活。

有没有一种方法可以在不将每个具有子模块的重用组件都变成模块的情况下做到这一点？

Answer 1

简单地使用 '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 },
];