具有错误（拆分）查询参数的 Angular，Http GET

Question

我正在尝试使用 queryParams，所以我不会在前端 (Angular) 和后端 (java spring 启动) 中创建特定组件。

我正在制作一个看起来很相似的电子商务网站。在我的主页上有这个。

  <a [routerLink]="['/ads']" [queryParams]="{category: 'multimedia'}">

我在我的广告组件中制作了这个，

 ngOnInit() {
this.subscription = this.activatedRoute.queryParams.subscribe(params => {
  this.category = params['category'];
  console.log(this.category)
});
this.getAds();
}

getAds(): void {
console.log(this.category)

this.adService.getAds(this.category).subscribe(
  (ads) => {
    this.rowData = ads;
    this.isLoadingResults = false;
  },
  (err) => {
    console.log(err);
    this.isLoadingResults = false;
  }
);
}

console.logs 给我正确的参数，在这种情况下是多媒体，但是当使用此代码发出请求时：

 getAds(param): Observable<Ad[]> {
return this.http.get<Ad[]>(apiUrl + "ads",{params: param}).pipe(
  tap(),
  catchError(this.handleError("getAds", []))
);
}

我看到了这个：

http://localhost:9191/ads?0=m&1=u&2=l&3=t&4=i&5=m&6=e&7=d&8=i&9=a

请求参数的后端给我一个空结果。我究竟做错了什么？ PS：如何对多个参数执行此操作？

Answer 1

当我们制作一个带参数的路由器 URL 时，我们就有了这样的路由器

const routes: Routes =[{ path: 'example/:category', component: examolComponents}];

之后，我们可以从这样的标签中设置

<a [routerLink]="['/example', 'multimedia']">

之后我们需要从组件调用类别并像这样

category: string;
 constructor(private route: ActivatedRoute) { 
       route.paramMap.subscribe(params => {
         this.category = params['params'].category
       });
   }

Answer 2

您可以使用快照来获取您的 queryPramas 并在您的构造函数中初始化您的类别，我建议这样做

category: string;
constructor(private route: ActivatedRoute) {
  this.category = this.route.snapshot.queryParams['category'];
}    

ngOnInit() {
 this.getAds();
}
 
...

您的服务：

 getAds(param): Observable<Ad[]> {
  const params = new HttpParams()
  .set('category', param);
  return this.http.get<Ad[]>(apiUrl + "ads",{params}).pipe(
    tap(),
    catchError(this.handleError("getAds", []))
  );
 }

如果你真的想跟踪 queryParams 值，你可以像以前一样订阅 queryParams 并将你的 getAds 移到 .subscribe 中，给它一个类别广告参数，让你的 http 调用对你的查询参数变化做出反应：

ngOnInit() {
 this.subscription = this.activatedRoute.queryParams.subscribe(params => {
  this.category = params['category'];
  console.log(this.category)
  this.getAds(this.category); // move it inside and give it the category as parameter
 });
} 

getAds(category: string): void {
this.adService.getAds(category).subscribe(
  (ads) => {
    this.rowData = ads;
    this.isLoadingResults = false;
  },
  (err) => {
    console.log(err);
    this.isLoadingResults = false;
  }
);
}

最好的解决方案是你需要监听 queryParams 变化的情况是使用 switchMap rxjs 运算符，这将取消以前的 http 调用以防万一或新的查询参数值，如果用户在短时间内点击了多个 link，那么只会考虑最近点击的 link

具有错误（拆分）查询参数的 Angular，Http GET

Angulat, Http GET with wrong (split) queryParams

query-parameters

angular