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 路由。