route.queryParams.subscribe returns 在 Angular Typescript 组件中未定义

Question

我需要将 id 作为参数传递给我的 angular 组件

在我的 html 我有这样的东西

<a [routerLink]="['/viewjobdetail',  currentJob.id]">
    {{ currentJob.title }}
</a>

app.module.ts RouterModule.forRoot配置为

  { path: 'viewjobdetail/:id', component: JobDetailComponent }

在我的调用组件中我有

import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute){}

ngOnInit(): void {
this.route.queryParams.subscribe(params => {
  debugger;
  var a = params['id'];
  this.displayJobId = parseInt(params['id']);
});

但是当我检查它总是显示 undefined 时，我在这里做错了什么？ }

Answer 1

您应该使用params或paramMap而不是queryParams，查询参数只能识别像viewjobdetail?id=23

这样传递的查询参数

queryParams 更好，因为 params 可能在未来的版本中被弃用

this.route.paramMap.subscribe(paramMap => {
  debugger;
  var a = paramMap.get('id');
  this.displayJobId = parseInt(a);
});

Answer 2

我得到了解决方案。为此，我们需要使用带有 queryParams 的查询参数。我修改了我的 html 如下

<a [routerLink]="['/viewjobdetail']" [queryParams]="{id: currentJob.id}">
{{ currentJob.title }}
</a>

并在 app.module.ts

{ path: 'viewjobdetail', component: JobDetailComponent }

然后在我的调用组件中

  this.route.queryParams.subscribe(params => {
  
  var a = params.id;
  }

route.queryParams.subscribe returns 在 Angular Typescript 组件中未定义

route.queryParams.subscribe returns undefined in Angular Typescript Component

url-routing

typescript

angular2-routing

angular