如何正确声明 Angular 路由器的子路由？

Question

我有以下路由：

//Root routes
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'documents', loadChildren: () => import('./documents/documents.module').then(m => m.DocumentsModule) },
      { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
      { path: 'accounts', loadChildren: () => import('./account/account.module').then(m => m.AccountModule) },
    ],
    canActivate: [AuthGuard],
  },
  {
    //The goal of separating auth and account is to have the pages to becomes authentified in the Auth module, with a totally different layout
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
    canActivate: [UnauthGuard],
  },
];

然后，对于子“AccountModule”，我有以下路线：

const routes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: '', redirectTo: 'profile', pathMatch: 'full' },
];

我的

AuthenticatedLayoutComponent

基本上只有一个页眉/页脚和一个路由器出口：

<div id="container" class="flex flex-column w-screen">
  <header class="flex-grow-0 z-1">
    <app-header></app-header>
  </header>
  <main class="flex-grow-1 z-0">
    <router-outlet></router-outlet>
  </main>
  <footer class="flex-grow-0 z-1">
    <app-footer></app-footer>
  </footer>
</div>

• 如果我尝试访问

  http://localhost:4200/accounts/profile

  一切正常
• 但奇怪的是，如果我尝试访问

  http://localhost:4200/profile

  ，我也会被重定向到我的 ProfileComponent，而没有页眉/页脚。

为什么这被认为是有效路径以及如何防止它？

Answer 1

就像评论中指出的那样，问题是应用程序根模块导入了

AccountModule

，因为它包含应用程序根模块需要的东西。此时，

AccountModule

的路线定义已加载，从而公开了

/profile

路线。

解决此问题的一种方法是解决根模块和

AccountModule

之间的依赖关系，并停止导入它。然后，仅通过延迟加载来加载具有路由定义的模块，从而使

/profile

路由不可用。但这可能需要付出很大的努力。

另一种更快的修复方法是从

/accounts

路由中删除延迟加载，并直接在根路由模块中定义其子路由：

//Root routes
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      // ...
      {
        path: 'accounts',
        children: [
          { path: 'profile', component: ProfileComponent },
          { path: '', redirectTo: 'profile', pathMatch: 'full' },
        ]
      },
    ],
    canActivate: [AuthGuard],
  },
  // ...
];

Answer 2

受到@JSONDerulo 答案的强烈启发：

因为我无法使用延迟加载，但我仍然希望将我的规则包含在我的帐户模块中：

1. 我现在在我的 AppModule 中声明该模块
2. 我导出我的帐户路由并将它们用作我的 AppRoutingModule 中的子路由
3. 我删除了我的 AccountModule 的 AccountRoutingModule 的导入

应用程序路由模块：

import { routes as accountsRoutes } from './account/account-routing.module';
const routes: Routes = [
  {
    path: '',
    component: AuthenticatedLayoutComponent, //All childs pages will have headers
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'documents', loadChildren: () => import('./documents/documents.module').then(m => m.DocumentsModule) },
      { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) },
      { path: 'accounts', children: accountsRoutes },
    ],
    canActivate: [AuthGuard],
  },
  {
    //The goal of separating auth and account is to have the pages to becomes authentified in the Auth module, with a totally different layout
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
    canActivate: [UnauthGuard],
  },
];

账户路由模块

export const routes: Routes = [
  { path: 'profile', component: ProfileComponent },
  { path: '', redirectTo: 'profile', pathMatch: 'full' },
];