Encode HttpParams Angular - quan1997ap/angular-app-note GitHub Wiki

Một số kí tự khi sử dụng HttpParams sẽ bị encode :

    + thành  khoảng trắng
    | thành  %7C
    @ thành  %40   
    : thành  %3A
    $ thành  %24
    , thành  %2C
    ; thành  %3B
    + thành  %2B
    = thành  %3D
    / thành  %2F

Thông thường khi chúng ta dùng muốn thêm Query Params vào url. Url muong muốn sẽ có dạng:

Cách 1
getCountries(data: any) {
    let httpParams = new HttpParams();
    Object.keys(data).forEach(function (key) {
       httpParams = httpParams.append(key, data[key]);
    });

    return this.httpClient.get("/api/countries", httpParams )
}


Cách 2
getCountries(data: any) {
    return this.httpClient.get("/api/countries", {params: data} )
}

Lỗi xảy ra như sau

Nếu data truyền quan params có chứa các kí tự đặc biệt : Vd

(gt,createdTime,2022/11/11)|(gt,createdTime,2022/12/11). Có chứa kí tự  "|"

Nên khi request sẽ bị đổi thành

(gt,createdTime,2022/11/11)%7C(gt,createdTime,2022/12/11).  Kí tự   "|"  =>  "%7C"

Cách giải quyết

https://stackoverflow.com/questions/51942703/character-converting-into-space-in-httpparams-angular-6

Tạo File: urlencoder.ts

import {HttpParameterCodec} from '@angular/common/http'

export class CustomURLEncoder implements HttpParameterCodec {

    encodeKey(key: string): string {
        // bỏ encodeURIComponent(key) nếu không muốn url endcode key truyền lên
        return encodeURIComponent(key); 
    }
    encodeValue(value: string): string { 
        // bỏ encodeURIComponent(value) nếu không muốn url endcode giá trị params truyền lên
        return value; 
    }
    decodeKey(key: string): string { 
        return decodeURIComponent(key); 
     }
    decodeValue(value: string) {
        return decodeURIComponent(value); 
     }
}

Khi call API service

import {CustomURLEncoder} from './urlencoder';
import {HttpParams, HttpHeaders, HttpClient} from '@angular/common/http';

export class ApiService {
    constructor(private httpClient: HttpClient){}
    const fileDetails = new HttpParams({encoder: new CustomURLEncoder() })
        .set('filename','1 + 2 = 3')

    return this.httpClient.post(url, fileDetails);
}