Angular6 路由传参及获取参数的两种方式

第一种：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
) { }