Angular 5 个新的不可变 HttpClient 中断动态 URL 参数

Question

我没有在 Typescript 中使用不可变变量，但新的 Angular 更新让我卡住了。我尝试用新的 Http 库更新我自己的 Http 服务。现在我无法动态添加 url 参数到 Http GET 请求。

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

我有一个简单的函数，它应该处理不同的动态添加方式，通过传递通用对象或同时具有 'key' 和 'value' 属性的对象.它看起来像这样：

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;
}

有什么方法可以使用不可变对象重新创建此功能？

所以如果我有一个对象，例如

{
  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);
}

它会将请求 url 重写为

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

我发现这非常有用，因为我可以轻松地随调用传递一组动态参数。我如何使用不可变对象重新创建它？

（顺便说一句："non-breaking"，在这种情况下切换到不可变对象似乎很重要）

Answer 1

因为HttpClient参数，headers等...是不可变的，每次尝试修改时，都会返回一个全新的object。这意味着您必须捕获此新引用才能使您的更改持续存在。您的新功能将如下所示：

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;
}

Angular 5 个新的不可变 HttpClient 中断动态 URL 参数

Angular 5 new immutable HttpClient breaks dynamic URL params

typescript

angular

angular-httpclient

angular5