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
) { }