Angular子组件路由无法识别求助：配置与期望路由说明

架构老林

2026-5-6

解决Angular路由器无法识别子组件路由的问题

我来帮你排查下这个路由配置的问题，你想要实现v3/products/{productId}/types的路由，当前配置主要有两个核心问题：

缺少v3这个顶层路由前缀，现有配置里没有对应这个路径的路由节点
父组件StandardproductsComponent中大概率没添加<router-outlet>标签——Angular的子路由组件必须通过父组件里的路由出口才能渲染

修正后的路由配置

const routes: Routes = [
  {
    path: "",
    redirectTo: "v3/products",
    pathMatch: "full",
    canActivate: [AuthorizedGuardService],
  },
  // 新增v3顶层路由节点，匹配路径前缀
  {
    path: "v3",
    canActivate: [AuthorizedGuardService], // 权限守卫统一放在这里管控所有v3开头的路由
    children: [
      {
        path: "products",
        component: StandardproductsComponent,
        resolve: { loaded: StandardsResolver },
        children: [
          {
            path: ":productId/types",
            component: StandardtypesComponent,
            // 按需启用以下配置
            // resolve: { loaded: StandardTypesResolver },
            // canActivate: [AuthorizedGuardService]
          }
        ]
      }
    ]
  }
];

必须补充的操作

给父组件添加路由出口
打开standardproducts.component.html，添加<router-outlet></router-outlet>标签，这个是Angular渲染子路由组件的容器，没有它子组件根本无法显示。
验证路由跳转
你可以通过Router服务测试跳转：
```
// 在组件中注入Router后使用
this.router.navigate(['/v3/products', productId, 'types']);
```
或者直接在浏览器地址栏输入/v3/products/123/types（替换123为实际的productId）验证路由是否生效。