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)