如何从独立路由模块的组件跳转到同级路由模块

你遇到的核心问题是路由路径解析错误——Selection和Overview模块属于不同布局的父路由层级，相对路径跳转无法匹配到正确的路由。下面是具体的解决步骤和原因分析：

1. 确保正确注入Router服务 #

首先在selection.component.ts中，先注入Angular的Router服务，这是编程式跳转的基础：

import { Router } from '@angular/router';

@Component({
  // 你的组件元数据
})
export class SelectionComponent {
  constructor(private router: Router) { }
}

2. 使用绝对路径执行跳转 #

你的SelectionComponent所在路由是/selection（属于TopNavbarOnlyLayoutComponent的子路由），而OverviewModule的路由是/overview（属于MainLayoutComponent的子路由），两者不属于同一个父路由层级。如果用相对路径（比如this.router.navigate(['overview'])），Angular会尝试匹配不存在的/selection/overview路由，从而抛出Cannot match any routes错误。

正确的做法是使用以斜杠开头的绝对路径，直接指向目标路由：

// 方法1：使用navigate数组形式
this.router.navigate(['/overview']);

// 方法2：使用navigateByUrl更直观
this.router.navigateByUrl('/overview');

3. 验证路由配置的正确性 #

检查你的Layout Routing Module中的路由配置，确保以下两点：

• overview路径拼写无误
• 懒加载写法符合你的Angular版本：
  • Angular 14+ 支持你当前的直接返回模块写法（loadChildren: () => OverviewModule）
  • 若使用低于14的版本，需要改为动态导入字符串形式：

    { path: 'overview', loadChildren: () => import('./overview/overview.module').then(m => m.OverviewModule) }
    

调整后就能成功从Selection组件跳转到Overview模块对应的路由了。

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