Angular 如何导航到同级路由？

假设我有这个路由器配置

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

并通过此URL导航到

SalesComponent

/department/7/employees/45/sales

现在我想转到

联系人

，但由于我没有绝对路线的所有参数（例如，上例中的部门ID，

7

），我更喜欢使用相对链接，例如

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

或

---

不幸的是，这不起作用。也许有一个显而易见的解决办法，但我没有看到。有人能帮忙吗

如果您正在使用新路由器（3.0.0-beta2），您可以使用ActivatedRoute导航到相对路径，如下所示：

constructor(private router: Router, private r:ActivatedRoute) {} 

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

更新日期：2019年2月8日Angular 7.1.0

当前路线：/department/7/employees/45/sales

旧版本可以：/department/7/employees/45/sales/contacts

根据@KCarnaille的评论，上述内容不适用于最新的路由器。新方法是将

.parent

添加到

this.r

中

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

---

更新可以：/department/7/employees/45/contacts

RouterLink指令始终将提供的链接视为当前URL的增量：

[routerLink]=“['/absolute']”
[routerLink]=“['../../parent']”
[routerLink]=“['../sibling']”
[routerLink]=“[”./child']”//或
[routerLink]=“子节点”
//具有路由参数../同级；abc=xyz
[routerLink]=“['../sibling'，{abc:'xyz'}]
//使用查询参数和片段../sibling？p1=value1&p2=v2#frag
[routerLink]=“['../sibling']”[queryParams]=“{p1:'value'，p2:'v2'}”fragment=“frag”

navigate（）

方法需要一个起点（即

relativeTo

参数）。如果没有提供，则导航是绝对的：

构造函数（专用路由器：路由器，专用路由：ActivatedRoute）{
this.router.navigate（[“/absolute/path”]）；
this.router.navigate（[“../../parent”]，{relativeTo:this.route}）；
this.router.navigate（[“./sibling”]，{relativeTo:this.route}）；
this.router.navigate（[“/child”]，{relativeTo:this.route}）；//或
this.router.navigate（[“child”]，{relativeTo:this.route}）；
//具有路由参数../同级；abc=xyz
this.router.navigate（[“./sibling”，{abc:'xyz'}]，{relativeTo:this.route}）；
//使用查询参数和片段../sibling？p1=value1&p2=v2#frag
this.router.navigate（[“./sibling”]，{relativeTo:this.route，
查询参数：{p1:'value'，p2:'v2'}，片段：'frag'}）；
//RC.5+：导航而不更新URL
this.router.navigate（[“./sibling”]，{relativeTo:this.route，skipLocationChange:true}）；

事实上，我也处于同样的情况，但这对我不起作用。。。自从正式发布以来，有些事情发生了变化？@KCarnaille-Hmm我使用的是@angular/router 3.0.0（已完成，不是beta版），它仍然正常工作。不确定从那时起他们是否有任何突破性的变化。我们如何使用

routerLink从html中做到这一点？这实际上不应该由
解决。父级
只需删除../并在路径中保留“联系人”，如下所示：
This.router.navigate（[“联系人”]，{relativeTo:This.r}）。/something
与组件在路由器树中呈现的位置相关，但它与当前路由无关，因为这可能是应用
[routerLink]
的路由树中更深的路由。如果您试图在页面的页眉中使用面包屑作为示例。它将与该标题的呈现位置相关，很可能不是您想要的。
    // Working(08/02/2019) 
    goToContact() {
       this.router.navigate(["../contacts"], { relativeTo: this.r.parent });
    }