Angular中queryParams无法接收参数问题求助

嘿，我看到你的问题啦！问题出在路由参数的类型不匹配上——你配置的是路径参数，但却在尝试用查询参数的方式传递和接收，这就导致组件里只能拿到空对象啦。下面给你两种解决思路，选一种适合你的就行：

方案一：使用路径参数（匹配你当前的路由配置） #

你的路由配置已经定义了路径参数:className，所以需要调整routerLink的写法来传递路径参数，同时组件里要订阅params而不是queryParams。

修改navbar.component.html #

把原来的routerLink改成数组形式，直接传递className作为路径参数：

<a *ngFor="let item of studentClasses" [routerLink]="['/classes/all-courses', item.className]">

修改all-courses.component.ts #

订阅activeRoute.params来获取路径参数：

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

// ...

constructor(private activeRoute: ActivatedRoute) {}

ngOnInit() {
  this.activeRoute.params.subscribe(param => {
    console.log(param.className); // 这里就能拿到预期的className值啦
  });
}

方案二：改用查询参数（如果更符合你的需求） #

如果想通过查询参数（比如/classes/all-courses?prop=xxx）传递值，需要调整路由配置，并修正routerLink的写法。

修改class-routing.module.ts #

移除路径里的:className，因为查询参数不需要在路由路径中定义：

export const routes: Routes = [ 
  { path: 'all-courses', component: AllCoursesComponent }, 
];

修改navbar.component.html #

修正routerLink的写法（注意数组的正确格式，queryParams是独立绑定项）：

<a *ngFor="let item of studentClasses" [routerLink]="['/classes/all-courses']" [queryParams]="{prop: item.className}">

修改all-courses.component.ts #

保持订阅queryParams，此时就能拿到prop的值了：

ngOnInit() { 
  this.activeRoute.queryParams.subscribe(queryParam => { 
    console.log(queryParam.prop); // 这里就能获取到className的值啦
  }); 
}

内容的提问来源于stack exchange，提问作者Ande Mohit