How do I navigate to a sibling route?

Question

Let's presume I got this router config

export const EmployeeRoutes = [    { path: 'sales', component: SalesComponent },    { path: 'contacts', component: ContactsComponent } ]; 

and have navigated to the SalesComponent via this URL

/department/7/employees/45/sales 

Now I'd like to go to contacts, but as I don't have all the parameters for an absolute route (e.g. the department ID, 7 in the above example) I'd prefer to get there using a relative link, e.g.

[routerLink]="['../contacts']" 

or

this.router.navigate('../contacts') 

which unfortunately doesn't work. There may be an obvious solution but I'm not seeing it. Can anyone help out here please?

Answer 1

If you are using the new router (3.0.0-beta2), you can use the ActivatedRoute to navigate to relative path as follow:

constructor(private router: Router, private r:ActivatedRoute) {}   /// // DOES NOT WORK SEE UPDATE goToContact() {   this.router.navigate(["../contacts"], { relativeTo: this.r }); } 

Update 08/02/2019 Angular 7.1.0

current route: /department/7/employees/45/sales

the old version will do: /department/7/employees/45/sales/contacts

As per @KCarnaille's comment the above does not work with the latest Router. The new way is to add .parent to this.r so

    // Working(08/02/2019)      // DOES NOT WORK SEE UPDATE     goToContact() {        this.router.navigate(["../contacts"], { relativeTo: this.r.parent });     } 

the update will do: /department/7/employees/45/contacts

Update 12/12/2021 Angular > 10

As @ziz194 mention it, this is how it now works.

constructor(private router: Router, private r:ActivatedRoute) {}   goToContact() {   this.router.navigate(["contacts"], { relativeTo: this.r }); }