Angular单页面命名路由问题：侧边栏与内容区无法同时加载求助

1. 修正路由配置（routes.ts） #

首先移除根路由中指向AppComponent的配置（AppComponent是应用根组件，路由组件需加载到其内部的router-outlet中，不能将它作为路由目标组件），重新组织路由结构：

export const routes: Routes = [
  // 默认重定向到planeGeo，同时加载内容区的top内容
  { path: '', redirectTo: '/planeGeo(content:top)', pathMatch: 'full' },
  // 侧边栏（默认router-outlet）的主路由
  { path: 'planeGeo', component: PlaneGeometryMainComponent },
  // 内容区（命名router-outlet: content）的独立路由
  { path: 'top', component: TestComponent, outlet: 'content' },
  { path: 'top1', component: TestComponent, outlet: 'content' },
];

2. 验证访问URL #

使用以下格式的URL即可同时加载侧边栏和对应内容区：

• 加载planeGeo侧边栏 + top内容：http://localhost:.../planeGeo(content:top)
• 加载planeGeo侧边栏 + top1内容：http://localhost:.../planeGeo(content:top1)

关键问题说明 #

• 原根路由配置错误：把AppComponent作为路由component会导致嵌套加载异常，路由组件必须是渲染到AppComponent内部router-outlet的子组件。
• 命名路由需与主路由同级：不能将命名路由嵌套在主路由的children中，否则无法同时激活两个outlet。正确的URL格式为主路由路径(命名outlet:命名路由路径)。
• 测试路由的问题：原planeGeo/top1路由仅激活了命名outlet，默认outlet无匹配路由，因此侧边栏为空。调整后通过planeGeo(content:top1)可同时激活两个区域。

可选：侧边栏子路由扩展 #

如果后续需要侧边栏添加二级导航，可给PlaneGeometryMainComponent配置子路由，渲染到默认router-outlet中：

{
  path: 'planeGeo',
  component: PlaneGeometryMainComponent,
  children: [
    { path: 'submenu1', component: PlaneGeoSubmenu1Component },
    { path: 'submenu2', component: PlaneGeoSubmenu2Component },
  ]
},

此时访问/planeGeo/submenu1(content:top)，侧边栏会显示PlaneGeoSubmenu1Component，内容区显示TestComponent。

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