Custom RouteReuseStrategy for Angular's child module

Daniel Kucal picture Daniel Kucal · Jul 3, 2017 · Viewed 9.2k times · Source

I want to use this custom route reuse strategy for just one module:

export class CustomRouteReuseStrategy extends RouteReuseStrategy {
    public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return true;
    }
}

So I've passed into @NgModule() in one of my modules named ChildModule:

providers: [
        {
            provide: RouteReuseStrategy,
            useClass: CustomRouteReuseStrategy
        }
]

Unfortunately, when I pass it there it simply gets ignored. Although works fine when added to my root AppModule... I'm not sure if it matters, but ChildModule is lazily loaded. How to solve it?

Answer

Daniel Kucal picture Daniel Kucal · Jul 3, 2017

I finally achieved it by passing a bit modified CustomRouteStrategy to AppModule:

export class CustomRouteReuseStrategy extends RouteReuseStrategy {
    public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return (future.routeConfig === curr.routeConfig) || future.data.reuse;
    }
}

And adding data: { reuse: true } to the routing of lazily loaded ChildModule:

{
    path: 'some-path',
    data: { reuse: true },
    loadChildren: './child.module#ChildModule',
},

Demo with more advanced solution