子模块的 Angular 合并路线

Question

我正在将我的 Angular 应用程序划分为模块。对于模块，我有一个 View 组件和一个编辑组件。 View 组件有自己的 url(例如“/users”)。

编辑组件有一个共同的父 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 个子路线)

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

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

可以这样定义这些路由吗？ (1 个管理路线，有 3 个 child )

- 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

您可以拥有AdminModule，并在此模块内注入(inject)您的子模块(具有自己的路由)

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

• 身份验证，这里我有一个用于注册和登录的路由(两个组件)
• 仪表板(管理员)，在这里我有另一个模块，例如 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