Angular 8中如何从URL获取参数值？解决传参后无法获取问题

你当前的问题核心是参数传递方式与获取方式不匹配：

问题原因 #

在dashboard.component.ts中，你通过queryParams传递的是URL查询参数（格式为?id=2），但在main.component.ts里监听的route.params对应的是路由路径参数（比如路由配置为/:id时，/dashboard/2这类路径里的参数），两者属于不同类型的路由参数，因此无法获取到值。

两种修复方案 #

方案1：继续使用查询参数，修改获取逻辑 #

调整main.component.ts的参数监听方式，改用queryParamMap（Angular官方推荐，类型更安全）或queryParams来获取查询参数：

// main.component.ts
import { ActivatedRoute, ParamMap } from '@angular/router';

// ...

ngOnInit(){ 
  // 推荐使用paramMap方式
  this.route.queryParamMap.subscribe((paramMap: ParamMap) => {
    const id = paramMap.get('id');
    alert(id);
  });

  // 也可以直接使用queryParams
  // this.route.queryParams.subscribe((params) => {
  //   alert(params['id']); 
  // });
}

建议将参数获取逻辑放在ngOnInit钩子中，这是组件初始化阶段获取数据的标准时机，比ngAfterViewInit更合适。

方案2：改用路径参数传递 #

如果希望通过路由路径传递参数（而非查询参数），需要按以下步骤调整：

1. 修改路由配置，为dashboard路由添加路径参数：

{ path: 'dashboard/:id', component: MainComponent }

2. 调整dashboard.component.ts的跳转逻辑：

nextComp(){
  this.router.navigate(['/dashboard', '2']); 
}

3. 此时main.component.ts中原来的route.params监听即可正常获取id，同样建议移到ngOnInit中：

ngOnInit(){ 
  this.route.params.subscribe((param) => {
    alert(param['id']); 
  });
}

内容的提问来源于stack exchange，提问作者EMahan K