Solvedangular Force reload/refresh current route with RouteReuseStrategy

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
With route reuse strategy that is supposed to not reuse a route (shouldReuseRoute returns false) a route is reloaded only if navigated URL is different (e.g. route param).

Currently route component is refreshed only when another route link is navigated. It is not clear if it is a bug or a missing feature.

Expected behavior
Route component is expected to be refreshed when any route link is navigated, including the current one.

Minimal reproduction of the problem with instructions
A plunk shows that route component is refreshed only when another route link is clicked.

What is the motivation / use case for changing the behavior?
Restore $route.reload() functionality from Angular 1. Apparently, the only way to achieve it at this moment is to navigate to temporary route and back. See also #9105

• Angular version: 2.4.2

• Browser: [all]

• Language: [all]

Hi,

If you really need to trick the Router into reloading the component on each routerLink click, you can use the following code in your Component

constructor(private router: Router){
     // override the route reuse strategy
     this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
     }

     this.router.events.subscribe((evt) => {
        if (evt instanceof NavigationEnd) {
           // trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated = false;
           // if you need to scroll back to top, here is the right place
           window.scrollTo(0, 0);
        }
    });

}

Hope this helps

Mihail C.

this worked for me, taken from this:

redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

now you can use like: this.redirectTo(this.router.url);

Great solution @mihaicux2, worked for me on 4.2.6, but i have the same problem with routerLinkActive as @josever90 and @vijaydhandapani.

But on my case i found a solution:

Note: A little detail, i using router.navigate instead of routerLink directive

On my component constructor only use:

this.router.routeReuseStrategy.shouldReuseRoute = function(){
        return false;
 } 

On the same component i have a anonymous function that is execute from a certain event and this function is who reload the actual route using:

...subscribe(() => {
        // Here is the other part of the trick
        this.router.navigated = false;
        this.router.navigate([this.router.url]);
})

Alternatively can test this with a setTimeout example on the ngOnInit hook:

setTimeout(() => {
        this.router.navigated = false;
        this.router.navigate([this.router.url]);
        }, 5000);

With this my routerLinkActive and my same route reload work fine....
Hope this helps...

@mihaicux2
Your trick is great, but the problem is that I can't use routerLinkActive. Do you have a solution for this problem?

@mihaicux2 , Thanks, but the resolver functions stick with the route was not called, moreover, the service instance injected in component still keep old value. I need new data from server in the same route.

My solution is just...create a new route but keep all the same:

{ path: 'route', component: MyComponent, resolve: { data: myResolver } },
{ path: 'route2', component: MyComponent, resolve: { data: myResolver } },

Then we just switch between these routes.