As of Angular 5.1 this can now be done by using the onSameUrlNavigation
configuration option as part of the built-in Angular router. It's fairly straightforward to set-up and get going although not obvious from the documentation.
The first thing you will need to do is set the option within your app.routing.ts if you have one or the file where your app routing is configured.
There are two possible values for onSameUrlNavigation 'reload' or false. The default value is false which causes nothing to happen when the router is asked to navigate to the active route. We want to set this value to reload. It is worth noting reload does not actually do the work of reloading the route, it only re-triggers events on the router that we then need to hook into.
@NgModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule],
})
To determine when those events are actually fired, you need to specify the runGuardsAndResolvers configuration option on your route. This can take three values...
paramsChange - only fire when route params have changed e.g. where the id in /user/:id changes
paramsOrQueryParamsChange - fire when a route param changes or a query param changes. e.g. the id or the limit property change in /user/:id/invites?limit=10
always - Always fire when the route is navigated
We want to specify always in this case. An example route is shown below.
export const routes: Routes = [
{
path: 'invites',
component: InviteComponent,
children: [
{
path: '',
loadChildren: './pages/invites/invites.module#InvitesModule',
},
],
canActivate: [AuthenticationGuard],
runGuardsAndResolvers: 'always',
}
]
That is your router configured. The next step is to actually handle the events within one of your components. You will need to import the Router into your component and then hook into the events. In this example, I have hooked into the NavigationEnd event which is fired once the router has completed its navigation from one route to the next. Due to the way we have configured the app, this will now fire even if you try to navigate to the current route.
export class InviteComponent implements OnInit {
constructor(
// ... your declarations here
private router: Router,
) {
// subscribe to the router events
this.router.events.subscribe((e: any) => {
// If it is a NavigationEnd event re-initalise the component
if (e instanceof NavigationEnd) {
this.initialiseInvites();
}
});
}
initialiseInvites() {
// Set default values and re-fetch any data you need.
}
}
The heavy lifting goes into the initialiseInvites() method, this is where you reset properties to their default values and fetch data from services to get the component back to its initial state.
You need to repeat this pattern across each component that you want to be able to reload when clicked or refresh through some form of refresh button, being sure to add the runGuardsAndResolvers option to each route in the routing file.
