Angular 5子路由导航异常：无法匹配路由URL段'user/1'

从你描述的问题和错误提示来看，核心问题是子路由的配置不符合Angular的路由规则，导致/user/1这个路径找不到对应的路由定义。下面是具体的分析和修复方案：

1. 修正路由配置结构 #

你的User路由需要将UserDetails作为子路由放在children数组中，并且子路由的path应该设置为动态参数:id（对应URL中的1），这样才能匹配/user/1、/user/2这类路径。

正确的app.routing.ts配置示例：

export const routes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  // User父路由（对应/user路径，显示表格页面）
  { 
    path: 'user', 
    component: UserComponent, 
    // 子路由配置
    children: [
      // 匹配/user/:id路径，加载UserDetails组件
      { path: ':id', component: UserDetailsComponent }
    ]
  },
  // 其他路由配置...
];

2. 确保父组件包含路由出口 #

父组件UserComponent的模板中必须添加<router-outlet>标签，因为子路由的组件（UserDetails）需要在父组件的这个出口位置渲染。

示例user.component.html：

<!-- 表格页面内容 -->
<h2>用户列表</h2>
<table>
  <tr *ngFor="let user of userList">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <!-- 编辑按钮的路由链接，指向/user/{{user.id}} -->
    <td><button [routerLink]="['/user', user.id]">编辑</button></td>
  </tr>
</table>

<!-- 子路由组件会在这里渲染 -->
<router-outlet></router-outlet>

3. 检查导航代码的正确性 #

如果是通过代码触发导航（比如在点击事件中调用router.navigate），要确保使用正确的路径数组形式：

import { Router } from '@angular/router';

constructor(private router: Router) {}

editUser(userId: number) {
  // 导航到/user/[userId]
  this.router.navigate(['/user', userId]);
}

常见错误点排查 #

• 你之前可能没有将UserDetails放在User路由的children数组中，导致路由系统无法识别/user/1是User的子路由
• 子路由的path可能写成了userdetails而不是:id，这会要求URL是/user/userdetails才能匹配，不符合你的预期
• 父组件缺少<router-outlet>，即使路由配置正确，子组件也无法渲染

按照上面的步骤调整后，http://localhost:4200/user会显示表格页面，http://localhost:4200/user/1会加载UserDetails组件并渲染在父组件的路由出口位置。

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