I have recently updated to the new RC3 and Router3alpha and it seems some things have changed.
I noticed that a click on the link of an active route does no longer result in the component to be reloaded. How do I achieve this behaviour with the new router3?
My link looks like
<a [routerLink]="['/link1']">Link1</a>
And to test I simply used a random number in ngOnInit:
export class LinkoneComponent implements OnInit
{
public foo: number;
constructor() {}
ngOnInit()
{
this.foo = Math.floor(Math.random() * 100) + 1;
}
}
It works just fine when switiching between routes, but a click on the currently active route does not result in a reload of the component.
For Angular 2 rc7 - router 3.0
Change base url in index.html to
<script>document.write('<base href="/" />');</script>
Angular 2-4 current route reload hack
For me, using this method works:
You can attach this method to a click event on the current component to reload it.
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'
orfalse
. The default value isfalse
which causes nothing to happen when the router is asked to navigate to the active route. We want to set this value toreload
. It is worth notingreload
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.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
changesparamsOrQueryParamsChange
- fire when a route param changes or a query param changes. e.g. theid
or thelimit
property change in/user/:id/invites?limit=10
always
- Always fire when the route is navigatedWe want to specify always in this case. An example route is shown below.
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.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.this worked for me, taken from this:
now you can use like:
this.redirectTo(this.router.url)
;This is the best hack that I've been able to come up to get around this annoying problem:
This works, but it's still a hack and I hate that the
Angular
team didn't provide areload()
methodThis is currently not supported. If only parameter values change but the route stays the same the component is not re-created.
See also https://github.com/angular/angular/issues/9811
You can subscribe to params to get notified when the params change to re-initialize the component instance.
See also https://stackoverflow.com/a/38560010/217408