5

I have upgraded Angular 2 from using the router marked "depricated" and started using the "new" router in rc5 and rc6. However now I am having an issue (started in rc5 and still the same in rc6) where having a component that needs to navigate to the same component but with different parameters (to fetch other data then the one that is in the view allready, based on the parameters).

In the depricated router, the constructor and AfterViewInit etc where called each time when navigating into the component with this.router.navigate. In the new router the constructor and other things does not get called when calling the same component again after one another. So I guess there is some kind of "magic" / caching happening. Also note that into the component I send one required parameter and a few optional parameters so the link looks something like this: http://localhost:2222/mycomponent/1;someotherparam=123

Is there any way to force the component to get created each time navigating to it?

alexsoftware
  • 841
  • 1
  • 7
  • 5
  • Not a great answer, but I'm not sure you're using ng2 correctly. You shouldn't be routing to the same component with different URLs. Use internal state changes to manipulate your component. If you just need the URL to change, check out this answer: http://stackoverflow.com/questions/35618463/change-route-params-without-reloading-in-angular-2/39322473#39322473 – Luke Dupin Sep 06 '16 at 02:40
  • I have to stress that the navigation code as it is now worked on the old router, which is now depricated / removed. It worked for a long time through many versions of Angular 2, but the issue is with the new router. I need for it to be able to navigate back and forth also with the back / forward button and the correct data is loaded based on the url parameters. Just changing the URL does not work well for me in my situation (espesially when the user click the back / forward buttons, data needs to be reloaded for the component). – alexsoftware Sep 06 '16 at 08:20
  • 1
    I now believe this is a bug with angular 2 router. When a new route (even when same component) the component should be constructed again. I got a workaround by adding this to the constructor of the component: router.events.subscribe((event: Event) => { if (event instanceof NavigationEnd) { // Load data based on parameters in ActivatedRoute } }); This will make it possible to pick up when the route change, and load the data based on that. – alexsoftware Sep 07 '16 at 16:50
  • @alexsoftware did you came across any solution for this. – tomalex Jan 05 '17 at 19:12

1 Answers1

7

Take a look at the Rangle.io guide for Angular 2.

Specifically the section on Reading Route Parameters

The reason that the params property on ActivatedRoute is an Observable is that the router may not recreate the component when navigating to the same component. In this case the parameter may change without the component being recreated.

So your component will not be recreated but you can subscribe to changes in the parts of the route that you are interested in (params, data, fragment, queryParams) and call these initialization methods as your subscribe() callback.

seangwright
  • 17,245
  • 6
  • 42
  • 54