如何在访问子路由时避免父路由组件触发？

我配置了一个带有单个子路由的父路由，当访问或刷新子页面时，父组件会触发请求、生命周期钩子等操作。请问如何实现加载子组件时不触发父组件？是否存在全局路由配置项可满足该需求？

以下是我的parent.route.ts代码：

{
  path: '',
  component: ParentComponent,
  children: [
    {
      path: 'child',
      loadChildren: () => import('./child/child.routes'),
    },
  ]
}

补充说明：应用采用100%独立组件（standalone components）

核心结论 #

不存在全局路由配置项可以直接实现“加载子组件时不触发父组件”的需求。Angular嵌套路由的设计逻辑是：父路由组件作为子路由的渲染容器，只要匹配到父路由路径，就会实例化父组件并渲染，再将子组件插入到父组件的<router-outlet>中。要避免父组件被触发，必须调整路由结构。

具体实现方案 #

将原嵌套路由结构改为平级路由，让子路由不再依赖父路由的路径匹配，这样访问子路由时就不会实例化父组件：

修改后的parent.route.ts代码：

export const parentRoutes: Route[] = [
  {
    path: '',
    component: ParentComponent
  },
  {
    path: 'child',
    loadChildren: () => import('./child/child.routes')
  }
];

特殊场景处理 #

如果你的ParentComponent是作为部分路由的布局容器（仅部分子路由需要依赖它），可以将需要父组件的路由保留嵌套结构，不需要的路由设为平级：

export const parentRoutes: Route[] = [
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      // 这里放需要依赖ParentComponent的子路由
      { path: 'sub', component: SomeSubComponent }
    ]
  },
  {
    path: 'child',
    loadChildren: () => import('./child/child.routes')
  }
];

这样访问/parent/sub时会加载ParentComponent，访问/child时则直接加载子路由组件，不会触发父组件的任何逻辑。

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