Angular中如何从复用组件重定向到所属路由模块根路径？

问题背景 #

我在Angular项目中遇到路由重定向问题：复用的ItemsSettingsComponent同时存在于items和deleted-items两个特性模块中，需要实现一个通用方案，让组件在不同模块中都能重定向到所属模块的根路径，不能硬编码URL。

当前路由配置如下：

• 根路由app-routing.module.ts：

{ path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) },
{ path: 'deleted-items', loadChildren: () => import('./deleted-items/deleted-items.module').then(m => m.DeletedItemsModule) },

• items-routing.module.ts：

{ path: '', component: ItemsComponent},
{ path: 'items-settings', component: ItemsSettingsComponent },

• deleted-items-routing.module.ts：

{ path: '', component: DeletedItemsComponent},
{ path: 'items-settings', component: ItemsSettingsComponent },

之前尝试this.router.navigate([''], { relativeTo: this.activatedRoute });，结果跳转到了应用根路径，不符合预期。

通用解决方案 #

方案1：相对导航到父级路径 #

直接使用相对路径../，基于当前路由导航到上一级（即所属模块的根路径）：

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

constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

redirectToModuleRoot() {
  this.router.navigate(['../'], { relativeTo: this.activatedRoute });
}

效果：当组件处于/items/items-settings时，跳转到/items；处于/deleted-items/items-settings时，跳转到/deleted-items。

方案2：基于父级路由导航到空路径 #

直接以当前路由的父级为基准，导航到空路径（对应模块的根路由配置）：

redirectToModuleRoot() {
  this.router.navigate([''], { relativeTo: this.activatedRoute.parent });
}

说明：此写法和方案1效果一致，逻辑更直观，明确指向父级路由的根路径。

方案3：健壮路由树遍历（适配嵌套场景） #

如果路由存在更深层级的嵌套，可通过遍历路由链找到特性模块的根路由：

redirectToModuleRoot() {
  let currentRoute = this.activatedRoute;
  // 遍历父级路由，直到找到特性模块的根路由节点
  while (currentRoute.parent && currentRoute.parent.routeConfig?.path !== '') {
    currentRoute = currentRoute.parent;
  }
  // 导航到模块根路径
  this.router.navigate([''], { relativeTo: currentRoute.parent });
}

优势：即使后续路由层级调整，该逻辑依然能正确定位到所属模块的根路径，兼容性更强。

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