Angular 5双路由出口下子路由/admin/products匹配失败求助

我来帮你分析下这个问题哈～你遇到的Cannot match any routes. URL Segment: 'admin/products'错误，核心原因是你的子路由都指定了命名路由出口（outlet: 'AdminRO'），但访问时用了默认出口的路径格式，导致Angular找不到匹配的路由配置。

问题根源 #

你的模块路由里，所有子路由都加了outlet: 'AdminRO'，这意味着这些组件是要渲染在命名路由出口里的，而不是Angular默认的主路由出口。直接访问/admin/products时，Angular会尝试在默认出口（无name属性的<router-outlet>）中查找对应路由，自然匹配失败。

两种解决方案 #

方案一：移除命名出口（推荐，若不需要多出口场景） #

如果你的页面不需要同时渲染多个路由出口，直接去掉子路由里的outlet: 'AdminRO'配置即可，这样子路由会使用默认出口，访问/admin/products就能正常匹配了：

修改module.Routing.ts代码：

export const routes: Routes = [ 
  { 
    path : 'admin', 
    component : IndexComponent, 
    children :[ 
      { path: '', component: HomeComponent }, // 移除outlet配置
      { path: 'products', component: ProductsComponent } // 移除outlet配置
    ] 
  } 
]; 
export const routing: ModuleWithProviders = RouterModule.forChild(routes);

方案二：保留命名出口，使用正确的访问格式 #

如果确实需要使用命名路由出口（比如页面需要同时渲染多个路由组件），需要做两步调整：

1. 确保父组件模板有对应命名出口
   在IndexComponent的模板文件中，添加命名路由出口：

<!-- 主出口（如果需要的话） -->
<router-outlet></router-outlet>
<!-- 命名出口 -->
<router-outlet name="AdminRO"></router-outlet>

2. 使用命名出口的URL格式访问
   正确的访问URL应该是：

localhost:4200/admin/(AdminRO:products)

如果是用路由链接跳转，需要这样写：

<a [routerLink]="['/admin', { outlets: { AdminRO: 'products' } }]">查看产品</a>

这样Angular就能正确识别要在AdminRO这个命名出口中渲染ProductsComponent了。

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