Angular 5新的不可变HttpClient打破动态URL参数

时间:2017-11-09 15:16:53

标签: angular typescript angular-httpclient angular5

我没有在Typescript中使用不可变的东西,但新的Angular更新让我陷入困境。我尝试用新的Http lib更新我自己的Http服务。现在我无法动态地将url参数添加到Http GET请求中。

这个问题在这里解释: https://medium.com/spektrakel-blog/angular-httpclient-enforces-immutability-dad161d8714b

我有一个简单的函数应该通过传递一个通用对象或一个带有'键的对象来处理动态添加的不同方式。和价值'属性。它看起来像这样:

public setParams(reqOptions) {
  let params;
  if (reqOptions) {
    if (reqOptions.key && reqOptions.value) {
      params = new URLSearchParams;
      params.append(reqOptions.key, reqOptions.value);
    } else {
      params = new URLSearchParams;
      for (let item in reqOptions) {
        if (reqOptions.hasOwnProperty(item)) {
          params.append(item, reqOptions[item]);
        }
      }
    }
  }
  return params;
}

有没有办法用immutables重新创建这个功能?

所以,如果我有一个像

这样的对象
{
  status: 'new',
  per_page: 50,
  page: 0
}

我打电话给上面这个函数

listShipments(reqOptions?): Observable<any> {
  let params = this.setParams(reqOptions);
  return this.http.get(this.baseUrl + '/shipments', {params: params})
    .map(this.extractData);
}

它会将请求网址重写为

shipments?status=new&per_page=50&page=0

我发现这非常有用,因为我可以轻松地传递一组动态参数和调用。我怎么能用immutables重新创建它?

(顺便说一下:#34;非破坏&#34;在这种情况下,切换到不可变的内容似乎非常重要)

1 个答案:

答案 0 :(得分:1)

因为HttpClient参数,标题等......是不可变的,所以每次尝试修改时,都会返回一个全新的对象。这意味着您必须捕获此新引用以使更改保持不变。您的新功能将如下所示:

setParams(reqOptions:any){
  let params = new HttpParams();
  if(!reqOptions) return params;

  if(reqOptions.key && reqOptions.value){
    return params.set(reqOptions.key, reqOptions.value);
  }

  for(let key of Object.keys(reqOptions)){
    params = params.set(key,reqOptions[key]);
  }
  return params;
}