Angular路由传参
第一种:Path传参
http://localhost:4200/vehicle-manage/details/34
routers配置
{ path: 'details/:id', component: VehicleManageDetailsComponent, data: { title: '车辆详情' } }
源页面——传递参数
details(id) {
this.router.navigateByUrl(`vehicle-manage/details/${id}`);
}
目标页面——获取参数
ngOnInit() {
let id = 0;
this.activatedRoute.params.subscribe(param => {
id = param.id;
console.log(id, '第一种'); // 34 第一种
});
}
第二种:Query传参
http://localhost:4200/vehicle-manage/details?id=34
routers配置
{ path: 'details', component: VehicleManageDetailsComponent, data: { title: '车辆详情' } }
源页面——传递参数
details(id) {
this.router.navigate(['vehicle-manage/details'], {
queryParams: {
id
}
});
}
目标页面——获取参数
ngOnInit() {
let id = 0;
this.activatedRoute.queryParams.subscribe(queryParam => {
id = queryParam.id;
console.log(id, '第二种'); // 34 第二种
});
}
注意: 两种都需要引入服务
源页面
constructor(
private router: Router
) { }
目标页面
constructor(
private activatedRoute: ActivatedRoute
) { }