Angular Router使用relativeTo时路径层级缺失问题求助

针对你遇到的preview路径下导航缺失层级的问题，以下是几种可行的解决方案：

方案1：确保指向最底层激活路由 #

问题可能出在ActivatedRoute指向的层级不对，尝试遍历路由树获取当前最底层的激活路由：

goToDefaultFlow(shared: Shared): void {
  let currentRoute = this.route;
  // 遍历到最底层的激活路由节点
  while (currentRoute.firstChild) {
    currentRoute = currentRoute.firstChild;
  }
  this.router.navigate(['shared', shared.id], { relativeTo: currentRoute });
}

方案2：通过路径片段拼接绝对路径 #

直接基于当前路由的快照路径片段拼接目标路径，避免相对导航的层级歧义：

goToDefaultFlow(shared: Shared): void {
  // 获取当前路由的所有路径片段
  const currentSegments = this.route.snapshot.url.map(seg => seg.path);
  // 拼接目标路径并导航
  this.router.navigate([...currentSegments, 'shared', shared.id]);
}

方案3：修复懒加载路由的导出写法 #

确认懒加载路由的导出和导入逻辑正确，避免路由层级解析错误：
在preview.route.ts中确保默认导出路由：

const routes: Route[] = [
  {
    path: '',
    component: YourReusableComponent,
    children: [
      {
        path: 'shared/:sharedId',
        loadComponent: () => import('../../components/shared.component').then(s => s.SharedComponent)
      }
    ]
  }
];

export default routes;

主路由中显式指定导入默认导出的路由：

{
  path: 'preview',
  loadChildren: () => import('./preview.route').then(m => m.default),
  canActivate: [SampleGuard]
}

方案4：调试生成的URL路径 #

通过createUrlTree生成URL并打印，确认导航目标是否符合预期：

goToDefaultFlow(shared: Shared): void {
  const urlTree = this.router.createUrlTree(['shared', shared.id], { relativeTo: this.route });
  console.log('目标URL:', this.router.serializeUrl(urlTree));
  // 确认正确后再执行导航
  // this.router.navigateByUrl(urlTree);
}

通过打印的URL可以直接定位是relativeTo指向错误，还是路径拼接逻辑问题。

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