Angular2 router - Navigate to the current page with different parameters

Question

I am trying to route to the current page with different param with no avail. I have a combo box that triggers:

this.router.navigate([\'page\', selectedId]);
         


        

Answer 1

Ok, after reading all your answers specially @mxii's (thank you for this), I understand that:

1. when routing to the same page with different param, only the param changes. the DOM stand still, no component rebuild, no onInit cycle.
2. The OnChanges hook triggers on every data-bind changes, which mean if I pass the param to child component I can't use OnInit on with this param, I must use OnChanges hook.

Good Lesson, Thanks!

Answer 2

The page will not refresh, cause that's how the Router works.. without refreshing the page!

You have to subscribe to the route parameters to detect changes in them and then do whatever you want to with that information..

So inject ActivatedRoute into your component and subscribe to the parameters like this:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params.subscribe(params => {
     // PARAMS CHANGED .. TO SOMETHING REALLY COOL HERE ..

     // for example extract the id..
     let id = +params['id']; // (+) converts string 'id' to a number

   });
}

Answer 3

The simplest way I found, by subscribing the router and then reload the page:

this.router.navigate(['page', selectedId]).then(page => { window.location.reload(); });

Answer 4

you can do this by using this

this.router.navigateByUrl('page_url/' + your_id);

By doing so your params has change successfully.

But it only change your URL if you really want to load some methods then you have to call them menually