Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Custom RouteReuseStrategy for Angular's child module

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?

like image 666
Daniel Kucal Avatar asked Jul 02 '17 22:07

Daniel Kucal


People also ask

What is RouteReuseStrategy shouldReuseRoute?

RouteReuseStrategy interface defines 5 methods: shouldReuseRoute This method is called everytime we navigate between routes. The future is the route we are leaving (not sure why is called future) and curr is the route we are landing.

How do you implement route reuse strategy?

Custom Route Reuse StrategyshouldDetach: Determines if this route (and its subtree) should be detached to be reused later. store: Stores the detached route. shouldAttach: Determines if this route (and its subtree) should be reattached. retrieve: Retrieves the previously stored route.

What is Runguardsandresolvers?

RunGuardsAndResolverslink type-alias. A policy for when to run guards and resolvers on a route.

What is ActivatedRouteSnapshot in angular?

ActivatedRouteSnapshotlinkContains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.


1 Answers

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

like image 83
Daniel Kucal Avatar answered Oct 08 '22 21:10

Daniel Kucal