Relative links/partial routes with routerLink

Question

In my app some URLs take the form

/department/:dep/employee/:emp/contacts 

In my sidebar I show a list of all employees, each of which has a [routerLink] which links to that employee's contacts

<ul>     <li>         <a [routerLink]="['/department', 1, 'employee', 1, 'contacts']"></a>     <li>     <li>         <a [routerLink]="['/department', 1, 'employee', 2, 'contacts']"></a>     <li>     ... </ul> 

However, with this approach I always need to provide the full path, including all the params (like dep in the above example) which is quite cumbersome. Is there a way to provide just part of the route, such as

<a [routerLink]="['employee', 2, 'contacts']"></a> 

(without the department part, because I don't really care about department in that view and my feeling is that this goes against separation of concerns anyway)?

Answer 1

That's supposed to work. The leading / makes it an absolute route, without it (or with ./), it becomes a relative route relative to the current route. You can also use ../ (or ../../ or more) to route relative to the parent or parents parent.

Answer 2

Instead of using './' or '../', I would suggest using relativeTo param in router.navigate function. E.g.:

this.router.navigate(['child'], {relativeTo: this.route}); 

or

this.router.navigate(['sibling'], {relativeTo: this.route.parent});