Force Angular2 to reload component on navigate

7
votes

In Angular2 RC1 and lower calling a route link always causes a component to reload:

<a [routerLink]="['/page', {id: 1}]">A link </a>

Using Angular2, none RC, the component isn't reloaded if its navigating to itself with different parameters. Is there any way to get the reload behavior back?

I understand the other way of dealing with this, subscribing from the ActivatedRoute and detected variable changes, but this causes the component logic to increase in complexity.

2
angularangular2-routing
That's not supported in the new router, but I saw discussions about plans to support that eventually. – Günter Zöchbauer
How did you accomplish this ? – user2180794
Could you please explain on how to achieve that functionality ? I'm facing the exact same problem, I have a single component linked to multiple routes, which gets loaded with different server data based on the current route. – Hazerd

2 Answers

3
votes

Although you've mentioned 'ActivatedRoute' and how it will complex your code, I think that this will help other people that are facing this problem when they're reaching your question, like me :) .

This topic will answer your question.

This code below (pasted from the topic above), is where the 'magic' is happening. If you'll place your 'reload' code in this subsribe function, your component will reload.

ngOnInit() {
   this.sub = this.route.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number
      // Some 'reload' coding
      // In a real app: dispatch action to load the details here.
   }); 
}
1
votes

A simple way to do this is to force the template to reload using *ngIf. You would need a variable that "turns the component off and on". If the values of variables have changed before this off/on behaviour, they will be rendered when the view is on again.