Angular Routing路由前情提要

navigate的使用

在Routing路由設定有提到如何用navigate切換路徑。

navigate還可以做到更多事情，舉例來說我的產品頁面有帶參數.../product/1?allow=1；
當我切換路徑之後想將參數帶入，像是.../product/1/edit?allow=1，該如何辦到？

1. 產品頁面html加入點擊按鈕

1
<button (click)="onEdit()">Edit<button>

2. 在ts檔撰寫onEdit()

relativeTo是新路由的相對應路徑，以下方範例為例，新路由會是原有路由再加上/edit；
queryParamsHandling則是用來處理參數，有merge和preserve，因為是要保留原有的參數，所以使用preserve。

註：this.route參考ActivatedRoute：用參數創建子頁面

1
2
3
4
5
constructor(..., private router: Router) { }

onEdit() {
    this.router.navigate(['edit], {relativeTo: this.route, queryParamsHandling: 'preserve'})
}