每次激活它的路由中的参数更改时如何激活组件

Question

我读到如果唯一改变的是路由参数，路由器会重用组件及其模板

所以被激活的组件如果在它的ngOnInit()中执行逻辑只会在像这样的路由激活它的第一次执行http://../projects/12

如何在切换到路径 http/.. 时执行该逻辑/projects/45

就我而言，我有这个项目：https://stackblitz.com/edit/planificador?file=src/app/planificador/components/resumen/resumen.component.ts

而当我select一个新项目第一次只执行ResumenComponent的ngOnInit()方法时

谢谢

Answer 1

TLDR

StackBlitz app.

解释

对于这种情况，我们可以使用自定义 RouteReuseStrategy:

app.module.ts

export class CustomRouteReuseStrategy extends BaseRouteReuseStrategy {
  shouldReuseRoute(
    future: ActivatedRouteSnapshot,
    curr: ActivatedRouteSnapshot
  ): boolean {
    const determinantParam = "proyectoId";

    if (
      !curr?.routeConfig?.path.includes(determinantParam) ||
      !future?.routeConfig?.path.includes(determinantParam)
    ) {
      return super.shouldReuseRoute(future, curr);
    }

    return future.params[determinantParam] === curr.params[determinantParam];
  }
}

BaseRouteReuseStrategy 已定义 here and here 这就是为什么在使用新的 param 时它没有创建新组件的原因：

shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
  return future.routeConfig === curr.routeConfig;
}

和它 returns true 因为来自两个对象（future 和 curr）的 routeConfig 的值是 Routes数组在planificador.module.ts:

{
  path: '',
  component: PlanificadorAppComponent,
  children: [
    {
      path: ':empleadoId/proyectos',
      component: MainContentComponent,
    },
    {
      path: ':empleadoId/proyectos/:proyectoId',
      component: MainContentComponent,
    }
  ]
},

正如预期的那样，Angular 通过遍历路线配置并比较之前的状态来构建下一个导航。这个 state 被定义为一棵树，其中每个注释都包含有意义的信息。在这些信息中，有一个 params 对象，它的键是参数（例如 :proyectoId），值由 URL 的样子决定。

那么，我们的自定义策略是如何确保如果导航涉及路径为 :empleadoId/proyectos/:proyectoId 的路线，则只有在满足以下条件时才应重用该路线（及其组件）：

future.params[determinantParam] === curr.params[determinantParam]

此外，如果您想阅读更多关于 Angular 路由器的信息，您可以查看这些文章：

每次激活它的路由中的参数更改时如何激活组件

how to activate a component each time the parameter in the route that activetes it changes

angular-routing

angular-router

TLDR

解释

app.module.ts