Angular子路由无法匹配/company下子路径问题求助

问题诊断 #

你的嵌套路由无法匹配主要有三个核心问题：

1. 子路由路径错误使用./前缀，Angular子路由的path是相对于父路由的路径，不需要相对路径符号
2. 子路由配置了命名路由出口（outlet），但company-main.component.html中只有默认的<router-outlet>，没有对应命名的出口，导致组件无法找到渲染位置
3. /company根路径未配置默认子路由，无法匹配空路径的访问场景

修复步骤 #

1. 修正子路由路径格式 #

在company-main.module.ts中，移除子路由path的./前缀：

export const routes: Routes = [
  { 
    path: 'company',
    component: CompanyMainComponent,
    children:[
      {
        path: 'employee/:id',
        component: EmployeeEditComponent,
        outlet:'employee-edit'
      },
      {
        path: 'details',
        component: CompanyComponent,
        outlet:'company-details'
      },
      {
        path: 'employees',
        component: EmployeesComponent,
        outlet:'employees'
      },
      // 添加默认子路由，匹配/company空路径访问
      {
        path: '',
        redirectTo: 'details',
        pathMatch: 'full'
      }
    ]
  }
];

2. 匹配路由出口配置 #

方案一：保留命名路由出口

如果确实需要使用命名出口，需在company-main.component.html中添加对应命名的路由出口：

<!-- 默认路由出口 -->
<router-outlet></router-outlet>
<!-- 对应子路由的命名出口 -->
<router-outlet name="employee-edit"></router-outlet>
<router-outlet name="company-details"></router-outlet>
<router-outlet name="employees"></router-outlet>

方案二：使用默认路由出口（更常用）

若无需区分多出口，直接移除子路由的outlet属性，使用默认出口：

export const routes: Routes = [
  { 
    path: 'company',
    component: CompanyMainComponent,
    children:[
      {
        path: 'employee/:id',
        component: EmployeeEditComponent
      },
      {
        path: 'details',
        component: CompanyComponent
      },
      {
        path: 'employees',
        component: EmployeesComponent
      },
      {
        path: '',
        redirectTo: 'details',
        pathMatch: 'full'
      }
    ]
  }
];

此方案下，company-main.component.html保留默认的<router-outlet>即可。

3. 验证路由访问 #

修复完成后，以下路径可正常匹配并渲染对应组件：

• localhost:4200/company/details → 渲染CompanyComponent
• localhost:4200/company/employees → 渲染EmployeesComponent
• localhost:4200/company/employee/1 → 渲染EmployeeEditComponent

额外注意事项 #

• 确保CompanyRoutingModule已正确导入到AppRoutingModule（你的代码已完成此配置）
• Angular路由路径区分大小写，访问路径需与配置的path完全一致

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