使用 routerLink 的相对链接/部分路由

Question

在我的应用中，一些 URL 采用这种形式

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

在我的侧边栏中，我显示了所有员工的列表，每个员工都有一个 [routerLink] 链接到该员工的联系人

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

但是，使用这种方法，我总是需要提供完整的路径，包括所有参数（如上面示例中的 dep），这非常麻烦。有没有办法只提供部分路线，比如

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

（没有 department 部分，因为我并不真正关心 department 在这种观点中，而且我的感觉是这无论如何都违背了关注点分离）？

Answer 1

应该可以的。前导的/ 使其成为绝对路线，没有它（或使用./），它将成为相对于当前路线的相对路线。您还可以使用../（或../../ 或更多）来相对于父级或父级父级进行路由。

Answer 2

我建议在 router.navigate 函数中使用 relativeTo 参数，而不是使用 './' 或 '../'。例如：

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

或

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

Answer 3

如果您的 app-routing.module.ts 看起来与此类似：

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

假设您在父路由http://localhost:4200/department/1 上，现在下面的routerLinks 将按上述方式工作：

1. 前缀./表示相对路径从当前路线
2. 无前缀表示相对路径与当前路线
3. 前缀/代表绝对路径从根路由
4. 前缀../ 表示相对路径从当前路线上移一级

<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

正如官方 Angular 文档 here 中所述 查看

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

组件

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

/雇员
/雇员/:id