Angular9 相對(duì)路徑

相對(duì)路徑允許你定義相對(duì)于當(dāng)前 URL 段的路徑。下面的例子展示了到另一個(gè)組件 second-component 的相對(duì)路由。FirstComponent 和 SecondComponent 在樹中處于同一級(jí)別，但是，指向 SecondComponent 的鏈接位于 FirstComponent 中，這意味著路由器必須先上升一個(gè)級(jí)別，然后進(jìn)入二級(jí)目錄才能找到 SecondComponent。你可以使用 ../ 符號(hào)來(lái)上升一個(gè)級(jí)別，而不用寫出到 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>

除了 ../，還可以使用 ./ 或者不帶前導(dǎo)斜杠來(lái)指定當(dāng)前級(jí)別。

指定相對(duì)路由

要指定相對(duì)路由，請(qǐng)使用 NavigationExtras 中的 relativeTo 屬性。在組件類中，從 @angular/router 導(dǎo)入 NavigationExtras。

然后在導(dǎo)航方法中使用 relativeTo 參數(shù)。在鏈接參數(shù)數(shù)組（它包含 items）之后添加一個(gè)對(duì)象，把該對(duì)象的 relativeTo 屬性設(shè)置為當(dāng)前的 ActivatedRoute，也就是 this.route。

//RelativeTo


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

goToItems() 方法會(huì)把目標(biāo) URI 解釋為相對(duì)于當(dāng)前路由的，并導(dǎo)航到 items 路由。