Angular9 相对路径

2020-07-07 13:32 更新

相对路径允许你定义相对于当前 URL 段的路径。下面的例子展示了到另一个组件 second-component 的相对路由。FirstComponentSecondComponent 在树中处于同一级别,但是,指向 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 路由。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号