Angular中使用Router.navigate()结合命名路由出口与URL参数报错求助

首先，你的问题出在路由路径匹配逻辑和router.navigate的写法上，我来一步步拆解：

1. 路由配置的核心问题 #

你定义的命名路由path: 'checktypes/:id'是基于根路径的路由，但你期望在/checktypes这个父路由的命名出口中加载它，这就导致路径匹配逻辑冲突。当你在/checktypes页面触发导航时，Angular会尝试在命名出口中匹配checktypes/1这个路径，但这个路径对应的是根路由下的/checktypes/1，而非当前路由上下文里的子路径，自然匹配失败。

2. router.navigate的写法问题 #

你当前的导航代码：

this.router.navigate([{outlets: {checktypeDetails: ['checktypes', 1]}}]);

会生成这样的URL：/checktypes/(checktypeDetails:checktypes/1)，而你的路由配置里并没有对应这个命名出口内checktypes/1路径的规则，所以才会抛出Cannot match any routes的错误。

修复方案（两种可选） #

方案一：调整路由为子路由（推荐） #

把命名路由作为checktypes的子路由，让路径自然继承父路由的上下文，这是Angular命名路由最常用的写法：

const routes: Routes = [
  {
    path: 'checktypes',
    component: ChecktypeComponent,
    children: [
      {
        path: ':id',
        component: ChecktypeDetailsComponent,
        outlet: 'checktypeDetails'
      }
    ]
  }
];

然后修改导航代码，使用相对路由（需要在组件中注入ActivatedRoute）：

// 先在组件构造函数中注入依赖
constructor(private router: Router, private route: ActivatedRoute) {}

// 执行导航
this.router.navigate(
  [{ outlets: { checktypeDetails: ['1'] } }],
  { relativeTo: this.route }
);

这样生成的URL会是/checktypes/(checktypeDetails:1)，完全匹配子路由规则，能正常加载组件。

方案二：修改导航路径为绝对路径 #

如果你不想调整路由结构，可以保持原配置，修改导航代码为绝对路径（在路径前加/）：

this.router.navigate([{ outlets: { checktypeDetails: ['/checktypes', 1] } }]);

这样Angular会正确匹配根路径下的checktypes/:id命名路由，URL会变成/checktypes/(checktypeDetails:/checktypes/1)，虽然能正常工作，但路径存在重复，不够优雅。

额外小提示 #

• 命名路由的标准URL格式是父路径/(出口名:路径)，你可以直接在浏览器地址栏输入这个格式的URL，快速测试路由配置是否正确。
• 如果你需要关闭命名路由（清空出口内容），可以导航到null：

  this.router.navigate([{ outlets: { checktypeDetails: null } }], { relativeTo: this.route })
  

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