Angular2 $ http获取带有路由属性

时间:2016-10-12 10:41:14

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

我有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谷歌浏览器扩展程序发送GET请求时,我可以点击此控制器操作并解析URL参数确定。

我想使用来自angular2客户端的http来获取此网络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?

1 个答案:

答案 0 :(得分:1)

URLSearchParams将params添加到url的搜索部分,这是'?'之后的部分。

您需要构建一个包含整个URL的变量,如下所示:

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

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