31

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?

slaesh
  • 16,659
  • 6
  • 50
  • 52
Avi
  • 1,924
  • 3
  • 17
  • 31
  • What else do you want? URL change is the expected behaviour of routing... – Harry Ninh Sep 21 '16 at 09:51
  • 4
    Try `navigate(['../', selectedId], { relativeTo: route })`, where `route` is the `ActivatedRoute` – Paul Samsotha Sep 21 '16 at 09:52
  • Thanks @peeskillet, unfortunately that didn't work. I get the same behavior, the Url is changing but the page does not refresh. – Avi Sep 21 '16 at 09:59
  • Is the url being set to the url you expect? Have you checked the console for any errors? If they're aren't any errors, probably will need a plunker to test it out – Paul Samsotha Sep 21 '16 at 10:00
  • Pardeep's answer words: `But it only change your URL if you really want to load some methods then you have to call them manually` leaded to the workaround I used when I faced this same issue a couple of minutes ago. My workaround consists in creating a mirror route to the same component. If the actual route matches (`this.router.url.match('/firstroute/')`) with the first mirror route, I redirect to the second mirror route (`this.router.navigate('/secondroute', params)`), otherwise I redirect to the first one. Yeah I know, it's quite an ugly way to solve this...It works, but it's an ugly way :) – Deadpool Nov 14 '18 at 13:53

5 Answers5

39

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

   });
}
slaesh
  • 16,659
  • 6
  • 50
  • 52
  • 4
    That's odd, when routing to the same page, the components tree stand still and the developer needs to emulate all events manually? this really complicate things! – Avi Sep 21 '16 at 10:53
  • which events do you mean? normally you just have to reload your model and just keep on.. – slaesh Sep 21 '16 at 11:02
  • 1
    I have several component in this feature module. the id bubbles to them as @input and they act accordingly. now i need to trigger all oninit events. – Avi Sep 21 '16 at 11:15
  • 1
    You could change the type of that input.. instead of `number` you could use and `Observable` and detect that changes in these components too. – slaesh Sep 21 '16 at 11:16
  • I am not sure about observables but what I did was hooking the onChanges instead of the onInit. the onChanges trigger on every change in the data-bind. – Avi Sep 21 '16 at 11:38
7

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!

Avi
  • 1,924
  • 3
  • 17
  • 31
4

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.

sephoro
  • 150
  • 10
Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215
1

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;
}
Tanmay Jain
  • 19
  • 1
0

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

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