Angular HttpParamsには、同じキーでクエリパラメータを生成するときに、シリアル化されたクエリパラメータに角括弧を追加する方法がありますか？

Question

複数の値を持つ同じキーの複数のクエリパラメータを使用してAPIをクエリすると、各キーに大括弧が追加されていない限り、要求が正しく解釈されません。例を挙げておきます：

let params = new HttpParams(); 

    params = params.append('color', 'blue'); 
    params = params.append('color', 'red'); 

    console.log(params.toString()) // color=blue&color=red 
    // Would prefer color[]=blue&color[]=red 

この機能を実現する方法はありますか？

Answer 1

私は自分自身のインターセプタを作成し、別のライブラリでクエリ文字列を生成することでこれを解決しました。以下を参照してください：

は、このライブラリをインストールします。

$ npm i query-string --save 

このインターセプタを追加します。

import { 
    HttpEvent, 
    HttpHandler, 
    HttpInterceptor, 
    HttpParams, 
    HttpRequest, 
} from '@angular/common/http'; 
import { Observable } from 'rxjs'; 
import * as querystring from 'query-string'; 

@Injectable() 
export class QueryParamInterceptor implements HttpInterceptor { 

    constructor() {} 

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    if (!request.params.keys().length || request.method !== 'GET') { 
     return next.handle(request); 
    } 

    let { params } = request; 

    let queryParams = this.createQueryParams(params); 

    let queryString = querystring.stringify(queryParams, { arrayFormat: 'bracket' }); 

    let urlWithParams = request.urlWithParams.replace(request.params.toString(), queryString); 

    request = request.clone({ 
     url: urlWithParams, 
     params: new HttpParams(), 
    }); 

    return next.handle(request); 
    } 

    private createQueryParams(params: HttpParams): { [key: string]: string } { 
    let queryParams = {}; 

    for (let key of params.keys()) { 
     let values = params.getAll(key); 

     if (!values) { 
     continue; 
     } 

     if (values.length === 1) { 
     queryParams[key] = values[0]; 

     continue; 
     } 

     queryParams[key] = values; 
    } 

    return queryParams; 
    } 
} 

Answer 2

あなたは角括弧エンコードしないangulars' HttpParameterCodecを上書きすることができます。

export class MyCustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec { 
    encodeKey(k: string): string { 
     return super.encodeKey(k) 
      .replace(new RegExp("%5B", "g"), "[") 
      .replace(new RegExp("%5D", "g"), "]"); 
    } 
} 

を私は私の解決策についてもう少し詳しく説明しました：http://www.moritz-benzenhoefer.com/angular-http-requests-use-square-brackets-in-httpparams-as-parameter-key-name/