Angular 5 Router Parameter

頁面的轉導以及相關參數的傳遞一直是 Web 應用程式發展的基礎，在 AngularJS 中，我們可以透過 Router 模組來定義各個頁面 (Component) 的繞送規則。然而，很多時候我們還需要將目前頁面上的參數往下一個頁面(Component)帶，才可以完成我們要做的工作。下列，說明如何在 AngularJS 裡進行參數傳遞的範例：

const routes: Routes = [
 { path: 'cmpa/:id', component: ComponentA },
 { path: 'cmpb/edit', component: ComponentB },
];

例如上述的 path/:id 即定義了一個 id 的變數，以變傳到 ComponentA 中。

2. 如何在 ComponentA 中接收 :id 參數？

import {ActivatedRoute} from "@angular/router";
.
.
.
constructor(private route: ActivatedRoute) {
    this.route.params.subscribe( params => console.log(params) );
}

使用 ActivateRoute 以取得相關參數資訊。在上述程式中，params 即為傳入的參數內容。


[參考資料]
1. https://codecraft.tv/courses/angular/routing/parameterised-routes/