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

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

  
  

     Relative Link that Works!:)
  

  
  

     Relative Link that Works!:)
  

  
  

     Relative Link that Works! :)
  

  
  

     Relative Link that does NOT work! :( 
  

  
  

     Absolute Link that does NOT work! :(