Angular 14如何通过代码路由到命名路由出口？

问题重现 #

• 原默认路由出口 <router-outlet></router-outlet> 下，使用 this.router.navigate([targetRoute])（targetRoute 为 'abc/def' 格式）可正常导航
• 添加命名出口 <router-outlet name="contentArea"></router-outlet> 后，修改导航逻辑为：

  this.router.navigate([{
      outlets: {
          contentArea: [targetRoute]
      }
  }]);
  

  或直接传递字符串：

  this.router.navigate([{
      outlets: {
          contentArea: targetRoute
      }
  }]);
  

  均抛出异常：

  ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'abc/def'

错误原因 #

Angular 路由处理命名出口的导航参数时，不能直接传递带斜杠的完整路径字符串。navigate 方法要求路径参数拆分为独立的路径段数组，而 targetRoute = 'abc/def' 作为单个字符串会被当作一个URL段处理，导致无法匹配对应路由。

解决方法 #

将 targetRoute 按斜杠拆分为路径段数组后，再传递给命名出口：

// 拆分路径字符串为独立段数组
const routeSegments = targetRoute.split('/');
this.router.navigate([{
    outlets: {
        contentArea: routeSegments
    }
}]);

额外验证点 #

• 确认路由配置中，abc/def 对应的路由是当前激活父路由的子路由，或路径配置完全匹配（比如路由表中存在 path: 'abc/def' 或嵌套的 abc 路由下包含 def 子路由）
• 若使用懒加载模块，需验证模块加载逻辑正常

内容的提问来源于stack exchange，提问作者F-H