Angular路由看似正常但未加载EventDrawingComponent问题咨询

这是Angular路由里很常见的子路由渲染问题，核心原因是父路由组件缺少<router-outlet>标签，导致子路由组件没有挂载的位置。

问题拆解 #

1. 当你给父路由（:eventID）指定component: EventComponent时，Angular会把这个组件当作子路由的容器。但子路由的组件（比如EventDrawingComponent）需要在父组件的模板里通过<router-outlet>来渲染——如果你的EventComponent模板里没有这个标签，子组件就无处可去，所以看起来只加载了父组件。
2. 移除父组件后，父路由变成了一个“空容器”，子路由组件会直接渲染在上级路由的<router-outlet>里，所以能正常显示，但此时/events/100路径因为没有绑定对应组件，自然就失效了。

修复步骤 #

1. 在EventComponent模板中添加<router-outlet>

打开event.component.html，添加子路由的出口标签，示例如下：

<!-- event.component.html -->
<div class="event-wrapper">
  <!-- 这里是EventComponent自身的内容 -->
  <h2>Event {{ eventId }}</h2>
  <p>Drawings & Results Section</p>
  
  <!-- 子路由组件将渲染在此处 -->
  <router-outlet></router-outlet>
</div>

2. 恢复原有的父路由配置

把之前移除的component: EventComponent加回去，路由配置保持最初的样子：

// Event ID routes
const routes: Routes = [
  {
    path: ':eventID',
    data: { breadcrumb: 'Drawings & Results' },
    component: EventComponent,
    children: [
      {
        path: 'drawing',
        loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
      }
    ]
  }
]

验证效果 #

• 访问/events/100：会加载EventComponent，显示父组件内容（此时子路由未激活，<router-outlet>为空）。
• 访问/events/100/drawing/200：EventComponent会先加载，然后EventDrawingComponent会渲染在它的<router-outlet>中，两个组件正常工作。

可选优化（提升用户体验） #

如果希望/events/100路径也能显示具体内容（比如该事件的图纸列表），可以给父路由添加一个默认子路由：

// Event ID routes
const routes: Routes = [
  {
    path: ':eventID',
    data: { breadcrumb: 'Drawings & Results' },
    component: EventComponent,
    children: [
      // 默认子路由，匹配/events/100
      { path: '', component: EventDrawingsListComponent },
      {
        path: 'drawing',
        loadChildren: () => import('@app/modules/event-drawing/event-drawing.module').then(mod => mod.EventDrawingModule)
      }
    ]
  }
]

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