Angular 5组件中如何读取路由传递的参数？

安全阿岳

2026-5-28

在Angular详情组件中获取路由传递的ID参数

你需要借助Angular的ActivatedRoute服务来读取路由中的参数，下面是具体的实现步骤：

步骤1：导入ActivatedRoute

首先在你的详情组件文件顶部，从@angular/router导入ActivatedRoute：

import { ActivatedRoute } from '@angular/router';

步骤2：注入ActivatedRoute服务

在组件的构造函数中注入ActivatedRoute：

export class DisplayUserComponent {
  constructor(
    private userService: UserService,
    private route: ActivatedRoute // 注入ActivatedRoute服务
  ) { }

  ngOnInit() {
    // 后续在这里获取参数并调用服务
  }
}

步骤3：获取路由参数

有两种常用的方式来获取参数，你可以根据组件的使用场景选择：

方式1：使用快照（适合组件不会被复用的场景）

如果你的详情组件每次从列表跳转过来都是新建实例，直接用route.snapshot就能快速获取参数：

ngOnInit() {
  // 从路由快照中取出id参数
  const userId = this.route.snapshot.paramMap.get('id');
  
  // 注意：路由参数默认是字符串类型，如果你的服务需要数字ID，记得转换类型
  this.userService.getUserById(Number(userId))
    .subscribe(res => console.log(res));
}

方式2：订阅paramMap（适合组件可能被复用的场景）

如果存在组件复用的情况（比如在详情页内直接跳转到另一个用户的详情，组件实例不销毁），建议订阅paramMap的变化，这样参数更新时能及时响应：

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const userId = params.get('id');
    this.userService.getUserById(Number(userId))
      .subscribe(res => console.log(res));
  });
}