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

一尘不染

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

javascript

从 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');

阅读 100

2022-07-16

共1个答案

一尘不染

新的 HTTP 客户端与不可变的请求对象及其所有一致部分（如HttpParams和）一起工作HttpHeaders。要了解为什么请参阅[为什么 http 请求及其所有组成部分（如 HttpHeaders 和 HttpParams 是不可变的）或阅读文章Insider’s guide into interceptors and HttpClientmechanis in Angular。

这就是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');

appendwithb参数更新 with 参数返回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 })

2022-07-16