Angular，带参数的Http GET？

Question

我不知道如何对这种方法进行 API 调用：

 [HttpGet]
[ActionName("GetSupport")]
public HttpResponseMessage GetSupport(int projectid)

因为它是GET但仍然要传递一个参数，如何做到这一点？会是这样吗？

 let headers = new Headers();
      headers.append('Content-Type', 'application/json');
      headers.append('projectid', this.id);

      this.http.get('http://localhost:63203/api/CallCenter/GetSupport', { headers: headers })

原文由 user8090896 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有这样的东西：

 let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('projectid', this.id);
let params = new URLSearchParams();
params.append("someParamKey", this.someParamValue)

this.http.get('http://localhost:63203/api/CallCenter/GetSupport', { headers: headers, search: params })

当然，将您需要的每个参数附加到 params 。它为您提供了更多的灵活性，而不仅仅是使用 URL 字符串将参数传递给请求。

编辑（2017 年 9 月 28 日）： 正如 Al-Mothafar 在评论中所述，从 Angular 4 起， search 已弃用，因此您应该使用 params

编辑（02.11.2017）： 如果您使用新的 HttpClient 现在有 HttpParams ，看起来和使用如下：

 let params = new HttpParams().set("paramName",paramValue).set("paramName2", paramValue2); //Create new HttpParams

然后基本上以相同的方式将参数添加到请求中：

 this.http.get(url, {headers: headers, params: params});
//No need to use .map(res => res.json()) anymore

更多关于 HttpParams 和 HttpClient 的文档

原文由 DGarvanski 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

只是为任何对 2017 年答案中提到的 HttpParams 方向感兴趣的人提供一段有用的代码。

这是我的 api.service 哪种“自动”参数进入请求的 HttpParams 。

 import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Params } from '@angular/router';
import { Observable } from 'rxjs';
import { environment } from '@env';

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

    constructor(private http: HttpClient) { }

    public get<T>(path: string, routerParams?: Params): Observable<T> {
        let queryParams: Params = {};
        if (routerParams) {
            queryParams = this.setParameter(routerParams);
        }
        console.log(queryParams);
        return this.http.get<T>(this.path(path), { params: queryParams });
    }

    public put<T>(path: string, body: Record<string, any> = {}): Observable<any> {
        return this.http.put(this.path(path), body);
    }

    public post<T>(path: string, body: Record<string, any> = {}): Observable<any> {
        return this.http.post(this.path(path), body);
    }

    public delete<T>(path: string): Observable<any> {
        return this.http.delete(this.path(path));
    }

    private setParameter(routerParams: Params): HttpParams {
        let queryParams = new HttpParams();
        for (const key in routerParams) {
            if (routerParams.hasOwnProperty(key)) {
                queryParams = queryParams.set(key, routerParams[key]);
            }
        }
        return queryParams;
    }

    private path(path: string): string {
        return `${environment.api_url}${path}`;
    }
}

原文由 Ben Racicot 发布，翻译遵循 CC BY-SA 4.0 许可协议