导航到第一个孩子时触发父路由 OnInit

Question

I have an issue that when I change route to a child route, the parent route's OnInit triggers. If I have 3 children, the parent will init maximum 3 times (each for children, when I navigate to the children on the first time).

I know it happens due to my CustomReuseStrategy but I dont know exactly why and how to fix it (I copied the CustomReuseStrategy from somewhere else)

A sandbox of the above problem

Answer 1

I was able to solve it using a different custom reuse strategy

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';


export class CustomReuseStrategy implements RouteReuseStrategy {
  public static handlers: { [key: string]: DetachedRouteHandle } = {};

  public shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    CustomReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
  }

  public shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!CustomReuseStrategy.handlers[this.getRouteUrl(route)];
  }

  public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig) {
      return null;
    }

    return CustomReuseStrategy.handlers[this.getRouteUrl(route)];
  }

  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
  }

  private getRouteUrl(route: ActivatedRouteSnapshot) {
    return route['_routerState'].url.replace(/\//g, '_');
  }
}