Angular5子路由中router-outlet无法稳定渲染组件（URL正确）

我之前在做Angular嵌套路由的时候也碰到过类似的“URL正确但组件渲染不稳定”的问题，结合你描述的MeetingsListComponent、PointsListComponent和PointComponent的嵌套场景，咱们从几个常见的排查方向入手：

1. 核对嵌套路由的配置结构 #

首先要确保你的路由配置严格遵循Angular嵌套路由的层级规则，特别是children数组的嵌套是否和组件中的router-outlet完全对应。正确的配置应该类似这样：

const routes: Routes = [
  {
    path: 'meetings',
    component: MeetingsListComponent,
    children: [
      // 对应展开面板后显示的PointsListComponent
      { 
        path: ':day', 
        component: PointsListComponent,
        children: [
          // 对应点击表格行后显示的PointComponent
          { path: ':pointId', component: PointComponent }
        ]
      }
    ]
  }
];

这里要注意两个关键点：

• 父路由（MeetingsListComponent）的路径不要加通配符**，否则会拦截子路由的匹配逻辑
• 子路由的path不要以斜杠开头（比如别写/:day，直接写:day），Angular会自动处理相对路径的拼接

2. 确认router-outlet的位置与可用性 #

确保MeetingsListComponent模板里的嵌套router-outlet放置在正确的位置，并且在组件需要渲染时是存在于DOM中的。比如你的折叠面板结构应该是这样：

<mat-expansion-panel *ngFor="let day of weekDays" (opened)="onPanelOpened(day.id)">
  <mat-expansion-panel-header>
    <mat-panel-title>{{ day.label }}</mat-panel-title>
  </mat-expansion-panel-header>
  <!-- 嵌套router-outlet必须放在面板内容区域，确保展开时才会被创建 -->
  <router-outlet></router-outlet>
</mat-expansion-panel>

因为折叠面板收起时router-outlet会被销毁，展开时重新创建，这时候Angular可能无法自动触发路由匹配。你可以在面板的opened事件里手动触发一次路由导航，确保组件能正确渲染：

// 在MeetingsListComponent中
constructor(private router: Router, private route: ActivatedRoute) {}

onPanelOpened(dayId: string) {
  // 基于当前父路由导航到对应子路由
  this.router.navigate([dayId], { relativeTo: this.route });
}

3. 检查路由导航的相对路径逻辑 #

当你在PointsListComponent中点击表格行跳转到PointComponent时，一定要用相对路径导航，避免使用绝对路径绕过嵌套层级。正确的导航代码应该是：

// 在PointsListComponent中
constructor(private router: Router, private route: ActivatedRoute) {}

goToPointDetail(pointId: string) {
  // 基于当前激活的子路由跳转到下一级
  this.router.navigate([pointId], { relativeTo: this.route });
}

如果用了绝对路径（比如this.router.navigate(['/meetings', dayId, pointId])），虽然URL会正确，但可能会导致组件渲染到错误的router-outlet（比如根路由的出口）。

4. 排查路由守卫与解析器的异常 #

如果你的路由配置了canActivate、resolve等守卫或解析器，检查这些逻辑是否有异步操作未正确完成，或者返回了错误状态。比如解析器如果返回null、抛出错误，或者守卫返回false，都会导致组件无法渲染，但URL仍然会更新。你可以暂时注释掉这些守卫/解析器，测试组件是否能正常渲染，来确认问题来源。

5. 检查组件自身的渲染错误 #

有时候组件无法渲染并不是路由的问题，而是组件本身的代码或模板有错误。打开浏览器的开发者工具，查看控制台是否有报错信息（比如未定义的变量、异步请求失败、模板语法错误等），这些错误会阻止组件正常渲染，但不会影响URL的更新。

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