Angular 查询参数如 httpd_query_params

Question

我目前正在使用 API 进行功能测试。所以我知道我会用下面的 url 得到很好的回应：

/api/v1/investisseurs?vehicule%5B0%5D=4

等效url解码

/api/v1/investisseurs?vehicule[0]=4

使用 Angular 与 HttpParams 发出我的呼叫，如关注

getInvestors(params: HttpParams): Promise<MelodiiaCollectionResponse> {
    console.log(params);
    return <Promise<MelodiiaCollectionResponse>>this.http.get(environment.httpdBackHost + '/investisseurs', {
       params: params,
}).toPromise();

这个结果在我的浏览器中有以下请求

/api/v1/investisseurs?vehicule%5B%5D=%5B%222%22%5D&page=1&max_per_page=15

等效url解码

/api/v1/investisseurs?vehicule[]=["2"]&page=1&max_per_page=15

问题，如何在Angular 7 中使用与php 方法http_build_query 相同的查询参数编码？

我想避免自己重新实现轮子:)

提前感谢您的帮助

Answer 1

您可以使用 HttpParams 生成器通过链接 append 方法自动解析您的参数。使用一些 reducer，您可以在 httpParams

中提供数组值

import { HttpParams } from '@angular/common/http';

//Whatever...

getInvestors(vehicules: number[], page: number, maxPerPage: number): Promise<MelodiiaCollectionResponse> {
  const params = vehicules.reduce(
    (previous, vehicule, index) => previous.append(`vehicule[${index}]`, vehicule.toString()),
     new HttpParams()
   )
   .append('max_per_page', maxPerPage.toString())
   .append('page', page.toString())
  return this.http.get<MelodiiaCollectionResponse>(`${environment.httpdBackHost}/investisseurs`, {
     params,
  }).toPromise();
}

Angular 查询参数如 httpd_query_params

Angular query params like httpd_query_params

php

http

query-parameters

angular