1

i have a route like this dashboard/tour/2/269, this component represents tour details, and inside that component there are some links which refer to similar tours, so when a user click one of those links i want to reload the component based on the new params like let's say this dashboard/tour/5/150, i tried to use a direct [routerLink] but it attach the new params to the old one to become like this dashboard/tour/2/269/tour/5/150 the route become invalid.

any suggestions please.

Ibrahim Mohammed
  • 302
  • 5
  • 17
  • Do you have the `` inside your dashboard.html ? – HMarteau May 01 '18 at 12:59
  • yes that's how i navigate to `dashboard/tour/2/269`, those numbers are routeparams coming from the clicked tour in dashboard so it brings up a tour details component , i want to renavigate to that component but with new routeparams – Ibrahim Mohammed May 01 '18 at 13:00

1 Answers1

0

You're going to have to inject ActivatedRoute into your component. Your routes would have to be set like this:

{ path: 'person/:id/:office_id', component: PersonComponent },

Then subscribe to the params:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    .subscribe(params => {
      const id = +params['id'];
      const office = +params['office_id'];
      console.log(`Current params are person ID ${id} and office ID ${office}`);
    });
}

Your routerLink would be:

[routerLink]="['/persons', 2, 5]"

Here, I have injected an instance of ActivatedRoute as route in my constructor.

You would need to obtain each of you params that you have listed on your routing for your Dashboard component. In this example, my routing is simple persons/:id where I would get the id from http://localhost:3000/persons/1. So if I had a router link to next person say [routerLink]="['/persons', 2]", this snippet of code would update and provide me an id of 2.

Based on your current illustration and question, this sounds like the solution your looking for.

StackBlitz Solution

https://stackblitz.com/edit/routing-params

Andrew Lobban
  • 2,065
  • 2
  • 24
  • 38
  • this is what i actually do, but my question is after you go in `http://localhost:3000/persons/1` from inside that component i want to change the param to `/persons/2` so the component of person will reload with the new params of id 2 – Ibrahim Mohammed May 01 '18 at 16:22
  • Do you want to perform the navigation from within the component class? Also what is your route definition? – Andrew Lobban May 01 '18 at 16:28
  • in parent component `Tours` i have a details button that goes to `[routerLink]= ['/tours/tour_id']` which is the details component, in that child component i intercept the routeparams of tour_id as your snippet above to retrieve data based on that id inside that child component there are other set of tours that are similar to that one, and each tour have a details link but going from that details link from the child makes it look like this `/tour/tour_id/tour_id`, just add a parameter to the current one not updating it – Ibrahim Mohammed May 01 '18 at 16:39
  • I see your issue. I also updated my answer. So you're route definition in your routes based on your URL is `dashboard/tour/:tour_id1/:tour_id2` and in your `[routerLink]="['/dashboard/tour', 5, 150]"` as the different segments are items in the array. Checkout this https://stackblitz.com/edit/routing-params – Andrew Lobban May 01 '18 at 16:55
  • thank you so much, so the routrlink is what needed to setup right – Ibrahim Mohammed May 01 '18 at 21:22