Question

我将我的角度应用程序划分为多个模块。对于一个模块，我有一个视图组件和一个编辑组件。视图组件具有自己的网址（例如'/ users'）。

编辑组件具有一个公共的父网址（例如'/ admin / users'）。

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

这确实有效，并且可以访问这些网址。

如果我查看带有预言的路线，我会看到角度将每个“ / admin”路线定义为单独的路线：（3条管理路线，每条路线有1个孩子）

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

但是由于这个原因，每次用户在页面之间切换时都会重新加载包装的admin组件（重置admin组件中的菜单状态）。

是否可以这样定义这些路线？（具有3个孩子的1条管理路线）

- 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个惰性模块：

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

观察：

我建议在某些路由中使用惰性模块来获得干净的代码，单元测试的独立性并提高应用程序性能。

如果您有任何疑问或建议，我可以在我的github存储库中找到此示例：https://github.com/dedd1993/ngx-admin

子模块的角度合并路线

2 个答案: