具有深度嵌套路由的 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 中是没有意义的。另一方面，单独的 RouterConfig 是否有效？

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

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

Angular2 routing v3.0.0 with deeply nested routes

router

routes

angularjs

angular