How to reload current page?

Question

I have a page for editing user, it has some children components inside. Each children components can change or doing some effect to its parent component.

So instead of emitting the changes to parent and updating some fields, I did a "reload" of the current page with

private route: ActivatedRoute;  reload(){     this.router.navigate(["/admin/user/edit/"+this.user.id]); } 

Basically, it redirects to the current page. For example, the current page is http://web.info/admin/user/edit/9 it will be redirected to this page with the hope all the data inside that page reloaded with the newest data.

but it seems the angular won't redirect/reload the same page with the router.navigate

How I should reload a current page?

Edit:

Here is the reason why I need to reload the page instead of manually updating the data on the current page. I need to do updates on Other Component, when I did the update it will add something to History Component. I need to refresh the User Component and History Component together since both components affected by the changes in Other Component.

Answer 1

A little bit tricky to do something so simple but had no luck trying to reload and recreate the entire parent & child components with current solution.

Angular Router now provides strategy configuration to tell the Router what to do in case you navigate to the same URL as this user suggests in this GitHub issue.

First of all you can configure what to do while setting up the Router (your router module).

@NgModule({    imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],    exports: [RouterModule] }) 

Or, if you are like me and don't want to change the entire router module behaviour you can do it with a method/function like this:

reloadComponent() {     this._router.routeReuseStrategy.shouldReuseRoute = () => false;     this._router.onSameUrlNavigation = 'reload';     this._router.navigate(['/same-route']); } 

Of course you have to first inject Router in your component's constructor:

// import { Router } from '@angular/router'; ... constructor(private _router: Router){} ... 

Somehow and as pointed out by @Abhiz you have to set shouldReuseRoute, with just configuring the Router by itself the page reload doesn't work with this aproach.

I've used an arrow function for shouldReuseRoutebecause new TSLint rules won't allow non-arrow functions.

Answer 2

It will work 100%. The following lines of code are responsible for page reload in my project.

load(val) { if (val == this.router.url) {   this.spinnerService.show();   this.router.routeReuseStrategy.shouldReuseRoute = function () {     return false;   };  } } 

Just use the following part in your code.

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