Angular2 $http 获取对具有路由属性的 Web api 控制器的请求答案

【问题标题】：Angular2 $http get request to web api controller with routing attributeAngular2 $http 获取对具有路由属性的 Web api 控制器的请求
【发布时间】：2016-10-12 10:41:14
【问题描述】：

我有 Web Api 控制器，其路由属性应用于这样定义的方法：

[Route("api/[controller]")]
public DataController(
[HttpGet("getdata/{a:int}/{b:int}/{dateFrom:datetime}/{dateTo:datetime}")]
public IActionResult GetEvents(Int32 a, Int32 b, DateTime? dateFrom, DateTime? dateTo)
{
    if (ModelState.IsValid)
    {
            data = dataService.GetData(a,b,dateFrom, dateTo);
            return Ok(data);
        }

        return BadRequest();
    }
}

因此，公开的 Web api URL 将是： http://localhost:port/api/data/getdata/1/2/2016-10-12T00:00:00/2016-10-20T00:00:00

当我使用 Postman google chrome 扩展程序发送 GET 请求时，我可以点击此控制器操作，并且 URL 参数解析正常。

我想使用来自 angular2 客户端的 http get 从这个 web api 获取数据：

let params: URLSearchParams = new URLSearchParams();
params.set('a', 1);
params.set('b', 2);
params.set('dateFrom', '2016-10-12T00:00:00Z');
params.set('dateTo', '2016-10-15T00:00:00Z');

    return this._http.get(this._eventsUrl, {
        search: params
    }).map((response: Response) => <ModelObject[]>response.json())
        .catch(this.handleError);

这个调用试图从这个 URL 获取数据： http://localhost:PORT/api/data/getdata?a=1&b=1&dateFrom=2016-10-12T00:00:00Z&dateTo=2016-10-15T00:00:00Z

如何从 angular 2 设置 http.get 以使用类似于 web api 路由中定义的 URL？

【问题讨论】：

标签： angular asp.net-web-api-routing

【解决方案1】：

URLSearchParams 将参数添加到 url 的搜索部分，即 '?' 之后的部分。

您需要构造一个包含整个 url 的变量，如下所示：

const url = `${this._eventsUrl}/${a}/${b}/${dateFrom}/${dateTo}`;

注意使用反引号构造一个包含变量a, b, dateFrom, dateTo的字符串并调用this.http.get(url).map

【讨论】：