Angular9 相对路径

相对路径允许你定义相对于当前 URL 段的路径。下面的例子展示了到另一个组件 second-component 的相对路由。FirstComponent 和 SecondComponent 在树中处于同一级别，但是，指向 SecondComponent 的链接位于 FirstComponent 中，这意味着路由器必须先上升一个级别，然后进入二级目录才能找到 SecondComponent。你可以使用 ../ 符号来上升一个级别，而不用写出到 SecondComponent 的完整路径。

//In the template


<h2>First Component</h2>


<nav>
  <ul>
    <li><a routerLink="../second-component">Relative Route to second component</a></li>
  </ul>
</nav>
<router-outlet></router-outlet>

除了 ../，还可以使用 ./ 或者不带前导斜杠来指定当前级别。

指定相对路由

要指定相对路由，请使用 NavigationExtras 中的 relativeTo 属性。在组件类中，从 @angular/router 导入 NavigationExtras。

然后在导航方法中使用 relativeTo 参数。在链接参数数组（它包含 items）之后添加一个对象，把该对象的 relativeTo 属性设置为当前的 ActivatedRoute，也就是 this.route。

//RelativeTo


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

goToItems() 方法会把目标 URI 解释为相对于当前路由的，并导航到 items 路由。