Angular 合并 child 个模块的路由

Question

我正在将我的 angular 应用程序分成模块。对于一个模块，我有一个视图组件和一个编辑组件。视图组件有自己的 url（例如“/users”）。

编辑组件有一个共同的 parent url（例如“/admin/users”）。

 - UserModule
     - UserPageComponent ('/user/:username')
     - UserEditComponent ('/admin/user/:username')
 - GroupModule
     - GroupPageComponent ('/group/:groupname')
     - GroupEditComponent ('/admin/group/:groupname')

这确实有效，并且 url 可以访问。

如果我用 augury 查看路由，我会看到 angular 将每个“/admin”路由定义为单独的路由：（3 个管理路由，每个路由 1 child）

- Root
    - Admin
        - Users
    - Admin
        - Groups
    - Admin
        - Permissions

但正因为如此，每次用户在页面之间切换时都会重新加载包装管理组件（重置管理组件中的菜单状态）。

是否可以这样定义这些路由？ (1 admin route with 3 children)

- Root
    - Admin
        - Users
        - Groups
        - Permissions

目前我使用此代码定义每个子模块中的路由（为每个其他模块替换 Users）。

export const routes: Routes = {
  path: 'admin',
  component: AdminComponent,
  children: [
    {
      path: 'Users',
      component: UserEditComponent
    }
  ]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)]
})
export class UserRoutingModule{}

在主路由模块中我只是做：

@NgModule({
  imports: [RouterModule.forRoot([])],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我尝试在 forRoot() 调用中将 onSameUrlNavigation 设置为 'ignore'，但不幸的是这并没有改变任何东西。

Answer 1

定义路由如

Root - Admin - Users
             - Groups
             - Permissions

对于 Angular 将类似于

Root - Admin - Users
     - Groups
     - Permissions

所以在你的 app.routing.module.ts 中正常定义路由。

export const routes: Routes = {
  path: 'admin',
  component: AdminComponent,
  children: [
    {
      path: 'Users',
      component: UserEditComponent
    }
  ],
  { path: 'groups' component: GroupComponent},
  { path: 'permissions' component: PermissionComponent}
}];

Answer 2

您可以拥有 AdminModule，并在此模块中注入您的子模块（具有自己的路由）

例如，我有一个加载 2 个惰性模块的主应用程序路由：

Authentication，这里我有一个注册和登录的路由（两个组件）
Dashboard（管理员），在这里我有另一个模块，例如 ClientModule 和 ProductModule，它们显示在 outer-outlet 内部仪表板组件中，该组件还包含一个 sidenav 和一个工具栏。

OBSERVATION:

I would advice to use lazy modules at some routes for clean code, independency at unit testing and improve app performance.

我的 github 存储库中有这个示例，如果您有任何问题或建议，我可以听取：https://github.com/danidelgadoz/ngx-admin

Angular 合并 child 个模块的路由

Angular merge routes of child modules

angular-routing

angular