angular 9/8:如何通过HttpClient 、HttpParams和fromString传递URL查询参数

分享于 

3分钟阅读

Angular

  繁體

在本文中,学习如何使用fromStringHttpParams将查询参数传递给URL或REST API端点。

这里,我们假设我们有一个REST API的server.com/api/products端点,_page_limit参数。

我们还假定有一个Angular 9项目,其中HttpClientModule被导入到主模块或模块中。

步骤1-生成,并实现Angular 9示例服务

返回到终端,导航到项目的目录,并运行以下命令生成Angular服务:


$ ng generate service example

接下来,打开src/app/example.service.ts文件,并按如下方式更新它:


import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from "@angular/common/http";


@Injectable({
 providedIn: 'root'
})
export class ExampleService {

 constructor(private httpClient: HttpClient) { }
}

我们导入HttpClient,并通过服务构造函数注入它。

步骤2-导入Angular 9HttpParams接口

接下来,在src/app/example.service.ts文件中导入HttpParams,如下所示:


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


发送带参数的get请求

接下来,定义sendGetRequestWithHttpParameters()方法,如下所示:


 public sendGETRequestWithParameters(){
 const opts = { params: new HttpParams({fromString: "_page=1&_limit=10"}) };
 return this.httpClient.get("http://server.com/api/products", opts);
 }

. This way we pass the value of 1 to thequery parameter and 10 to

还可以使用append()方法HttpParams设置和传递参数:


 public sendGETRequestWithParameters(){ ```
 let params = new HttpParams();
 params = params.append('_page', 1);
 params = params.append('_limit', 10);

 return this.httpClient.get("http://server.com/api/products", {params: params});
 }


相关文章