Angular 14模块内路由使用及多模块路由出口配置咨询

我正在开发一款数字杂志，出于性能与安全考量，希望将管理面板与杂志主体分离。经调研，懒加载Admin模块是最优方案，但我不清楚如何在模块内设置router-outlet以加载子模块。

我的初始app.component.html结构如下：

<div class="main-container" *ngIf="!this.currentUser">
  <div #topB class="top">
    <app-navbar></app-navbar>
  </div>

  <div id="content">
    <router-outlet></router-outlet>
  </div>
  <div><app-footer></app-footer></div>
</div>
<div class="admin-container" *ngIf="this.currentUser">
  <app-admin-panel-home></app-admin-panel-home>
  <router-outlet></router-outlet>
</div>

请问使用多模块（已配置懒加载Admin模块和Magazine模块的路由）时，能否实现上述效果？以下是我的路由配置代码：

app-routing.module.ts：

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
  },
  {
    path: 'adminpanel',
    loadChildren: () =>
      import('./admin-module/admin.module').then((m) => m.AdminModule),
  },
  {
    path: '',
    loadChildren: () =>
      import('./magazine-module/magazine.module').then((m) => m.MagazineModule),
  },
];

杂志模块路由配置：

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'latest', component: ArticleListComponent },
  { path: 'article', component: ArticlePageComponent },
  { path: 'blog', component: BlogHomeComponent },
  { path: 'blog/blog', component: BlogPageComponent },
  { path: '**', component: NotFoundComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

管理面板路由配置：

const routes: Routes = [
  {
    path: 'administrator-Dashboard',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'article-dashboard',
        component: ArticleDashboardComponent,
      },
      {
        path: 'category-dashboard',
        component: CategoryDashboardComponent,
      },
      { path: 'authenticate', component: LoginComponent },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

可以实现你的需求，但需要调整路由配置和组件结构，让路由层级与router-outlet的作用范围对应起来，具体步骤如下：

1. 优化App组件的容器结构 #

不需要在admin-container中直接渲染app-admin-panel-home，路由会负责加载Admin模块的组件。调整后的app.component.html：

<div class="main-container" *ngIf="!currentUser">
  <div #topB class="top">
    <app-navbar></app-navbar>
  </div>
  <div id="content">
    <router-outlet></router-outlet> <!-- 加载杂志模块的所有路由组件 -->
  </div>
  <div><app-footer></app-footer></div>
</div>
<div class="admin-container" *ngIf="currentUser">
  <router-outlet></router-outlet> <!-- 加载Admin模块的根组件及子组件 -->
</div>

2. 修正App层级路由冲突 #

当前App路由的空路径重定向和杂志模块的空路径会导致匹配异常，调整如下：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./magazine-module/magazine.module').then(m => m.MagazineModule),
    pathMatch: 'full' // 确保完全匹配空路径时才加载杂志模块
  },
  {
    path: 'adminpanel',
    loadChildren: () => import('./admin-module/admin.module').then(m => m.AdminModule),
  },
];

3. 调整Admin模块的路由层级 #

让adminpanel作为Admin模块的父路径，将AdminComponent设为模块根组件，并在其内部添加router-outlet加载子页面：

Admin模块路由修改： #

const routes: Routes = [
  {
    path: '', // 对应App路由中的`adminpanel`路径
    component: AdminComponent, // Admin模块的布局容器组件
    canActivate: [AuthGuard],
    children: [
      { path: '', redirectTo: 'administrator-Dashboard', pathMatch: 'full' }, // 默认跳转到仪表盘
      { path: 'administrator-Dashboard', component: AdminPanelHomeComponent }, // 对应原app-admin-panel-home组件
      { path: 'article-dashboard', component: ArticleDashboardComponent },
      { path: 'category-dashboard', component: CategoryDashboardComponent },
    ]
  },
  // 登录页放在Admin模块根路由下，不受AuthGuard保护
  { path: 'authenticate', component: LoginComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

AdminComponent模板（admin.component.html）： #

这个组件作为Admin模块的公共布局，需要包含自己的router-outlet：

<!-- 这里放Admin的公共导航/侧边栏 -->
<app-admin-sidebar></app-admin-sidebar>
<div class="admin-content-wrapper">
  <router-outlet></router-outlet> <!-- 加载article-dashboard等子组件 -->
</div>

4. 验证路由逻辑 #

• 未登录状态（!currentUser）：访问/加载杂志首页，/latest加载文章列表，以此类推，所有杂志路由都在main-container中渲染。
• 登录状态（currentUser）：访问/adminpanel会加载AdminComponent，自动跳转到/adminpanel/administrator-Dashboard显示仪表盘；访问/adminpanel/article-dashboard会在AdminComponent的router-outlet中渲染文章管理页面。
• 登录页可通过/adminpanel/authenticate访问，无需登录即可进入。

内容的提问来源于stack exchange，提问作者wael