Angular route传参

router-link-page1 跳转 router-link-page2router-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)

posted @ 2019-04-06 21:28  Lulus  阅读(1769)  评论(0编辑  收藏  举报