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)