Angular route傳參

從 router-link-page1 跳轉 router-link-page2 和 router-link-page3

經過自定義路由

設置router-link-page2的路由後有3個參數,parameter,parameter2,parameter3

{path: 'router-link-page2/:parameter/:parameter2/:parameter3', component: RouterLinkPage2Component}

跳轉router-link-page2

<a [routerLink]="['/router-link-page2', parameter,parameter2,parameter3]">前往Page2</a>

得到參數，注意這裏是params

import { ActivatedRoute } from '@angular/router';

constructor(
    private _activatedroute:ActivatedRoute
) { }

ngOnInit() {
    this.parameter=this._activatedroute.snapshot.params['parameter'];
    this.parameter2=this._activatedroute.snapshot.params['parameter2'];
    this.parameter3=this._activatedroute.snapshot.params['parameter3'];
}

經過queryParams

跳轉router-link-page3
在queryParams放入一個對象，裏面有個屬性page3Parameter

<a [routerLink]="['/router-link-page3']" [queryParams]="{page3Parameter:page3Parameter | json }">前往Page3</a>

得到參數，注意這裏是queryParams

this.page3Parameter=this._activatedroute.snapshot.queryParams['page3Parameter'];

示例代碼

示例代碼

參考資料

Angular : Passing Parameters to Route
Angular - Passing object to @Input parameter with routerlink
The Angular 6|7 Router: Handling Route Parameters with Snapshot and Observables (ParamMap)