CODEWITHSUNDEEP
angularangular2-routing
Avi
Avi

Reputation: 1964

Angular2 router - Navigate to the current page with different parameters

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]);

the Url is changing but that's about it.

How do I route to the same page with different param?

Upvotes: 31

Views: 43249

Answers (5)

Tanmay Jain
Tanmay Jain

Reputation: 19

The easiest way that worked for me to route to the same page with different query parameter is by using the following code,

import { Router } from '@angular/router';
constructor(private router: Router) {
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
}

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86790

you can do this by using this

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

By doing so your params will change successfully.

But it will only change your URL. If you really want to load some methods then you have to call them manually.

Upvotes: 4

Bat
Bat

Reputation: 139

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

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

Upvotes: 0

slaesh
slaesh

Reputation: 16917

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

   });
}

Upvotes: 39

Avi
Avi

Reputation: 1964

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!

Upvotes: 7

Related Questions