Angular RouterReuseStrategy with optional route

Question

I have route only with two optional parameters. By default when I trying to navigate from one of this route to another nothing happens. And thats fine. I know about routeParams.data.subscribe(...) feature, but this approach doesn't suit to me, I need to full reinitialize component. That's why in my demo I use custom RouteReuseStrategy with flag data {reuse: true}. I borrow the RouteReuseStrategy from here.

Expected behaviour in demo: Go to "Home" tab, make some +1, сlick "Go to same route" button (this navigate to the same HomeViewComponent), HomeViewComponent must reinitialize and Counter must be 0.

But component not recreated, Counter is the same. Stackblitz demo. Thank you!

Answer 1

Since Angular 5.1 you can use onSameUrlNavigation option when defining routes:

RouterModule.forRoot([
  { path: 'login', component: LoginViewComponent },
  { path: ':one/:two', component: HomeViewComponent, data: {reuse: false} },
  { path: '**', redirectTo: 'login' }
], { onSameUrlNavigation: 'reload' })

also change your CustomRouteReuseStrategy::shouldReuseRoute method as follows:

public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.data.reuse !== undefined ? 
           future.data.reuse : 
           future.routeConfig === curr.routeConfig;
}

Forked Stackblitz Example