RouteReuseStrategy in the child module

Question

here is my lazy loaded child module:

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(acnpRoutes),
    ....
  ],
  declarations: [...],
  providers: [
    {provide: RouteReuseStrategy, useClass: ACNPReuseStrategy}
  ]
})
export class AddCustomerNaturalPersonModule {
}

routes:

const acnpRoutes: Routes = [
  {
    path: '',
    component: AddCustomerNaturalPersonComponent,
    children: [
      {
        path: 'stepOne',
        component: ACNPStepOneComponent
      },
      {
        path: 'stepTwo',
        component: ACNPStepTwoComponent
      },
    ]
  }
]

And ACPNReuseStrategy:

export class ACNPReuseStrategy implements RouteReuseStrategy {
  handlers: {[key: string]: DetachedRouteHandle} = {}

  shouldDetach(route: ActivatedRouteSnapshot): boolean  {
    console.log(1)
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: {}): void {
    console.log(2)
  }

  ...

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.log(5)
  }
}

Unfortunately, none of these console.logs in the ACNPReuseStrategy methods are running. Why is this? Is it possible to reuse components in a lazy loaded module?

Answer 1

Firstly, you must understand what the future is and curr.eg: when you move from 127.0.0.1-00-00200/a to 127.0.0.1-00-00200/b, and now you are on b. the future is 127.0.0.1-00-00200/a, curr - b, because the future means that you will return in the future.

shouldReuseRoute false, future! == curr. , , , , . , true, , , curr.Imagine, a, b, a - , b - curr.A b - , , , ?

, , . :

navigate to a
shouldReuseRoute->return true->do nothing

a->b
shouldReuseRoute()->return false->shouldDetach()->return true->store a

then b->a
shouldReuseRoute()->return false->shouldDetach()->return true->store b->retrieve() return a ->attach() a.

, b- > a, , shouldReuseRoute() false, . , , . , , .

. .

https://medium.com/@gerasimov.pk/how-to-reuse-rendered-component-in-angular-2-3-with-routereusestrategy-64628e1ca3eb

RouteReuseStrategy shouldDetach Angular 2

, , , .