为什么HttpParams在角度4.3中不能在多行中工作

Question

从Angular 4.3开始,他们引入了HttpClient而不是Http.在HttpClient我不能URLSearchParams用于url查询参数.而不是URLSearchParams我正在使用HttpParams

这项工作

 var params = new HttpParams().append('a', '1').append('b', '2');

但为什么这不起作用

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

Answer 1

新的HTTP客户端使用不可变的请求对象及其所有的组成部分,如HttpParams和HttpHeaders.要理解为什么http请求及其所有组成部分(如HttpHeaders和HttpParams)都是不可变的,或者阅读文章Insider的Angular中的拦截器和HttpClient机制指南.

这就是为什么append方法合并参数并在每次调用时返回合并HttpParams对象的新实例的原因append:

  /**
   * Construct a new body with an appended value for the given parameter name.
   */
  append(param: string, value: string): HttpParams { 
        return this.clone({param, value, op: 'a'}); 
  }

  private clone(update: Update): HttpParams {
    const clone = new HttpParams({encoder: this.encoder}); <-------
    clone.cloneFrom = this.cloneFrom || this;
    clone.updates = (this.updates || []).concat([update]);
    return clone;                                          <--------
  }

所以在这里:

var params = new HttpParams().append('a', '1').append('b', '2');

在append与b参数更新由返回的对象append与a参数.

虽然采用这种方法

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

在append始终更新的初始状态HttpParams和所有的中间append业务有效地忽略.

所以你必须使用以前返回的值:

var params = new HttpParams();
params = params.append('a', '1');
params = params.append('b', '2');

或使用快捷方式fromObject:

let searchParams = new HttpParams({
    fromObject: {
        query: query,
        sort: sort,
        order: order
    }
});

const modified = req.clone({params: searchParams});

或setParams直接在请求上使用方法:

const modified = req.clone({setParams: {'query': query, 'sort': sort, 'order': order}});

此外,从5.1.x开始,您可以直接传递对象而不是HttpParams的实例:

const params = {
  'a': '1',
  'b': '2'
};

this.http.get('...', { params })

Answer 2

为此工作

var params = new HttpParams();
params.append('a', '1');
params.append('b', '2');

这必须改为

var params = new HttpParams();
params = params.append('a', '1');
params = params.append('b', '2');

它可以循环并动态添加

Answer 3

从5.0.0-beta.6(2017-09-03)开始,新功能(接受HttpClient标头和参数的对象映射)可用.

现在我们可以直接传递对象而不是HttpParams:

const params = {
  'a': '1',
  'b': '2'
};

this.http.get('...', { params })

或者代替HttpHeaders:

http.get('/url', {
   headers: {'My-Header': 'header value'}
})