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

Answer 1

I don't know if you can do it with [routerLink] but you can do it like so..
View

<ul>
    <li>
        <a (click)="onViewDetails(id)">Details</a>
    <li>
    ...

Component

construct( private router: Router, private route: ActivatedRoute ){
}
onViewDetails(id){
 this.router.navigate([id], {relativeTo: this.route});
}

/employee
/employee/:id

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

Answer 3

In case your app-routing.module.ts looks similar to this:

  {
    path: '/department/:dep', component: DepartmentComponent, children: [
      { path: 'employee/:emp/contacts', component: EmployeeComponent },
      // ... Other child routes
    ]
  }

Assuming you are on the parent route http://localhost:4200/department/1, now the below routerLinks will work as mentioned:

1. Prefix ./ represents relative path from current route
2. No Prefix represents relative path from current route
3. Prefix / represents absolute path from root route
4. Prefix ../ represents relative path to move up one level from current route

<ul>

  <!-- will generate URL: http://localhost:4200/department/1/employee/1/contacts-->
  <li class="nav-item">
     <a class="nav-link" routerLink="recipes" routerLink="./employee/1/contacts">Relative Link that Works!:)</a>
  </li>

  <!-- is same as above and generated URL: http://localhost:4200/department/1/employee/1/contacts-->
  <li class="nav-item">
     <a class="nav-link" routerLink="recipes" routerLink="employee/1/contacts">Relative Link that Works!:)</a>
  </li>

  <!-- is same as above and generated URL: http://localhost:4200/department/1/employee/1/contacts-->
  <li class="nav-item">
     <a class="nav-link" routerLink="recipes" [routerLink]="['employee', '1', 'contacts']">Relative Link that Works! :)</a>
  </li>

  <!-- is NOT THE SAME as above  and generated URL: http://localhost:4200/department/employee/1/contacts-->
  <li class="nav-item">
     <a class="nav-link" routerLink="recipes" routerLink="../employee/1/contacts">Relative Link that does NOT work! :( </a>
  </li>

  <!-- is NOT THE SAME as above  and generated URL: http://localhost:4200/employee/1/contacts-->
  <li class="nav-item">
     <a class="nav-link" routerLink="recipes" routerLink="/employee/1/contacts">Absolute Link that does NOT work! :( </a>
  </li>

</ul>

Answer 4

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.