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 RouteAngular - Passing object to @Input parameter with routerlinkThe Angular 6|7 Router: Handling Route Parameters with Snapshot and Observables (ParamMap)

转载于:https://www.cnblogs.com/Lulus/p/10662963.html

相关资源：数据结构—成绩单生成器