HttpParams
The Query parameters are added using the helper class HttpParams. The HttpParams is passed as one of the argument to HttpClient.get method.
To use HttpParams, you need to import it first as shown below.
1
import { HttpClient,HttpParams } from '@angular/common/http';
Then create an instance of the HttpParams class.
1
2
3
const params = new HttpParams()
.set('page', PageNo)
.set('sort', SortOn);
And then call the httpClient.get method passing the params as the argument.
1
2
3
return this.httpClient.get<repos[]>(
this.baseURL + 'users/' + userName + '/repos',
{params})
也可以用.append方法
1
2
3
4
5
6
params = new HttpParams()
.set('page', '2')
.append('page', '3')
.set('sort', 'name');
console.log(params.toString()); //Returns page=2&page=3&sort=name
HTTPParams is immutable
The HttpParams object is immutable. Everytime you call a set method on Params object, it will create and return a new instance of the Params.
For Example
The following code does not work
1
2
3
4
let params = new HttpParams();
params.set('page', PageNo);
params.set('sort', SortOn);
Each call to set method does not add the options to the existing HttpParams instance, but creates a new instance from the existing instance and returns it.
To work around, you can use the code as follows
1
2
3
Let params = new HttpParams()
.set('page', PageNo)
.set('sort', SortOn);
Or you can try this
1
2
3
4
let params = new HttpParams();
params=params.set('page', PageNo);
params=params.set('sort', SortOn);
Reference
https://www.tektutorialshub.com/angular/angular-pass-url-parameters-query-strings/
