Question

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

/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级RouterConfig的嵌套children中是没有意义的。另一方面，完全单独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，具有深层嵌套路由

1 个答案: