嵌套子组件路由异常：URL生成但未跳转至目标组件

我在一个component.ts文件的组件中，点击按钮调用openClientCallLogs函数时出现路由异常——浏览器URL已正确生成，但页面并未跳转到目标的ClientCallLogsComponent组件。

点击按钮触发的代码 #

openClientCallLogs(client: Client): void {
    this.router.navigate(['/index/client/clients-detail', client.id ,'call-logs']);
}

模块路由配置 #

export const clientsRoutes: Routes = [
  {
    path: 'client',
    children: [
      {
        path: 'clients-detail',
        component: ClientDetailsComponent,
        children: [
          { 
            path: ':id/call-logs',
            component: ClientCallLogsComponent
          }
        ]
      }
    ],
  },
];

App路由模块配置 #

const routes: Routes = [
  {
    path: '',
    component: FullComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full',
      },
      {
        path: 'dashboard',
        loadChildren: () =>
          import('./pages/pages.module').then((m) => m.PagesModule),
      },
      {
        path: 'index',
        loadChildren: () =>
          import('./pages/clients/clients.module').then((m) => m.ClientsModule),
      },

问题原因及修复方案 #

1. 父组件缺少<router-outlet>

ClientCallLogsComponent作为ClientDetailsComponent的子路由，必须在ClientDetailsComponent的模板文件（如client-details.component.html）中添加<router-outlet></router-outlet>标记。Angular需要通过这个出口渲染子组件，没有该标记的话，即使URL正确，子组件也无法显示。

2. 路由路径结构不匹配

当前路由配置中，clients-detail的子路由设置为:id/call-logs，但导航路径是/index/client/clients-detail/[id]/call-logs，这会导致路由匹配失败。正确的做法是将id参数挂载到clients-detail层级，再嵌套call-logs子路由：

export const clientsRoutes: Routes = [
  {
    path: 'client',
    children: [
      {
        path: 'clients-detail/:id', // 将id参数移至此处
        component: ClientDetailsComponent,
        children: [
          { 
            path: 'call-logs', // 子路由仅保留call-logs
            component: ClientCallLogsComponent
          }
        ]
      }
    ],
  },
];

对应的导航代码无需修改，仍保持：

openClientCallLogs(client: Client): void {
    this.router.navigate(['/index/client/clients-detail', client.id, 'call-logs']);
}

此时路径/index/client/clients-detail/123/call-logs将与路由配置完全匹配。

3. 确认模块路由导入正确性

确保ClientsModule中正确导入RouterModule并使用forChild注册子路由：

@NgModule({
  imports: [RouterModule.forChild(clientsRoutes)],
  exports: [RouterModule]
})
export class ClientsModule { }

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