Angular路由配置问题：子路由未激活时父路由不激活

问题根源分析 #

你当前的路由配置存在两个核心问题：

1. 空路径子路由未设置pathMatch: "full"，导致访问/时会默认匹配并加载FeatureComponent；
2. FeatureComponent作为所有业务子路由的公共父组件，Angular会复用其实例，不会在切换子路由时重建。

集中式路由配置方案 #

我们可以调整路由结构，让FeatureComponent仅在访问具体业务路由时加载，且每个业务路由对应独立的FeatureComponent实例，同时通过数组集中管理所有业务路由，避免重复配置：

1. 动态生成业务路由（集中管理）

在路由配置文件中，先定义所有业务路由的元数据，再动态生成完整的路由配置：

// 集中定义所有业务路由的路径和模块加载器
const featureRouteConfigs = [
  { path: "sale", loadChildren: () => import("./features/sale/sale.module").then(m => m.SaleModule) },
  { path: "currents", loadChildren: () => import("./features/currents/currents.module").then(m => m.CurrentsModule) },
  // 在这里添加更多业务路由...
];

// 生成Dashboard的子路由数组
const dashboardChildRoutes = [
  // 根路径匹配，仅激活DashboardComponent，不加载任何子组件
  { path: "", pathMatch: "full" },
  // 动态生成每个业务路由，每个路由都单独挂载FeatureComponent
  ...featureRouteConfigs.map(config => ({
    path: config.path,
    component: FeatureComponent,
    loadChildren: config.loadChildren
  }))
];

2. 最终路由配置

将生成的子路由数组传入Dashboard的路由配置中：

{
  path: "",
  component: DashboardComponent,
  providers: [ DashboardService, PopupService, NotificationsService ],
  resolve: { resolved: dashboardResolver },
  children: dashboardChildRoutes
}

方案效果说明 #

• 访问/时：仅匹配空路径路由，只激活DashboardComponent，不会加载FeatureComponent；
• 访问/sale或/currents时：路由层级为DashboardComponent→FeatureComponent→对应业务模块的组件；
• 切换业务路由时：每个业务路由对应独立的路由条目，Angular会为每个条目创建新的FeatureComponent实例，满足重建需求；
• 集中式管理：所有业务路由的元数据都在featureRouteConfigs数组中维护，新增/修改路由只需调整该数组，无需重复编写FeatureComponent相关配置。

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