Angular命名路由导航报NG04002：无法匹配路由问题求助

问题根源 #

你之前的配置错误在于：把命名路由和dashboard路由设为同级了。当点击导航链接时，Angular会在根路由层级寻找名为dashboard的路由出口，但这个出口其实在AdminRoutingComponent（主router-outlet渲染的组件）里面，层级不匹配导致路由找不到。

正确修复步骤 #

1. 调整路由配置 #

把命名路由放到dashboard路由的children数组里，让它成为子路由：

const routes: Routes = [
  // 这里放前端用户端的其他路由
  {
    path: 'dashboard',
    component: AdminRoutingComponent,
    children: [
      { 
        path: 'overview', 
        component: AdminOverviewComponent, 
        outlet: 'dashboard' 
      },
      // 其他后台命名路由都放这里
    ]
  }
];

2. 修正routerLink写法 #

现在需要基于dashboard父路由来指定命名出口的跳转，写法如下：

<!-- 在AdminRoutingComponent的模板里用这个导航链接 -->
<a [routerLink]="['/dashboard', { outlets: { dashboard: ['overview'] } }]">
  概览页面
</a>

配置完成后，访问url.com/dashboard(dashboard:overview)就能正常把AdminOverviewComponent渲染到命名出口里。

更简洁的替代方案（推荐） #

如果你的后台不需要同时显示多个路由内容，完全可以不用命名出口，改用普通子路由，配置更简单：

第一步：修改AdminRoutingComponent模板

把命名出口换成普通的router-outlet：

<router-outlet></router-outlet>

第二步：更新路由配置

const routes: Routes = [
  // 前端路由...
  {
    path: 'dashboard',
    component: AdminRoutingComponent,
    children: [
      { path: 'overview', component: AdminOverviewComponent },
      // 其他后台子路由
      { path: '', redirectTo: 'overview', pathMatch: 'full' } // 访问/dashboard时默认跳转到overview
    ]
  }
];

第三步：简化导航链接

<a [routerLink]="['/dashboard/overview']">概览页面</a>

这样访问url.com/dashboard/overview就正常显示，不会有任何路由错误。

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