具有深度嵌套路由的 Angular2 路由 v3.0.0

Question

现在正在从路由器 v2 迁移到 v3（感觉就像似曾相识）。路由配置现在再次与组件分离。它推翻了我认为非常明智的逻辑。他们在RouterConfig 中引入了children 属性，这让我很头疼。假设一个应用程序有很多类似的路由

/club/123/member/98/tasklist/921/edit

路由使用以下@Routes 装饰器分布在以下组件中

@Routes([{path: '/club/:id', component: DelegateClubComponent}])
export class MainApp {...}

@Routes([{path: 'user/:id', component: DelegateUserComponent}])
export class DelegateClubComponent {...}

@Routes([{path: 'tasklist/:id', component: DelegateTaskListComponent}])
export class DelegateUserComponent {...}

@Routes([{path: 'edit', component: EditTaskListComponent}])
export class DelegateTaskListComponent {...}

每个DelegateXComponents 负责解析各自的文档并使其在Service 中可用，其他组件被注入。此外，所有DelegateXComponents 都渲染了一个小模板，其中包含他们负责的文档的一些数据。

如何使用路由器 v3 完成此操作？将整个树映射到具有 5 层 children 的嵌套 RouterConfig 中是没有意义的。另一方面，单独的RouterConfigs 是否有效？

export const clubRoute: RouterConfig = [
  { path: 'club/:id', component: DelegateClubComponent }];

export const userRoute: RouterConfig = [
  { path: 'user/:id', component: DelegateUserComponent }];

只要幕后没有魔法发生，路由器怎么会知道userRoute 应该被视为clubRoute 的子路由。

困惑的问候

Answer 1

您可以在与组件相同的文件中定义配置，然后将它们组合成一棵完整的树，然后再将其传递给路由器。

import {childRoutes} from './child.component'

export const clubRoute: RouterConfig = [
  { path: 'club/:id', component: DelegateClubComponent, children: childRoutes }];