为什么 HttpParams 在 Angular 4.3 中的多行中不起作用

新的HTTP客户端可以处理不可变的请求对象及其所有组成部分，如HttpParams和HttpHeaders.要了解为什么要看Why is http request and all its constituent parts like HttpHeaders and HttpParams are immutable或读Insider’s guide into interceptors and HttpClient mechanics in Angular这篇文章.

这就是为什么append方法在每次调用append时合并合并的HttpParams对象的参数和returns the new instance:

  /**
   * 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 with b参数更新append with 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 })