Angular HttpClient，名称为“查询”的参数无法设置

Question

我在 Angular 服务中有一个 params 变量，其类型为 HttpParams。

当我这样做时

params.set('sortby', sortby.toString());

或

params.set('top', top.toString());

这两个都在工作并被添加到 params 变量并传递给 API。

但问题是当我在 API 中将路由参数定义为 'query' 时。我不明白为什么我的代码，

params.set('query', query.toString());

根本不工作。它只是没有被添加到参数列表中。我认为这与名称 'query' 有关。更新 API 目前不是一个选择。

有没有办法让'query' 工作？

API 调用：

尝试直接更新到来自 chrome 控制台的请求。即使这样我也找不到查询参数。

编辑：newParams()

这是返回带有正确编解码器的 HttpParams

protected newParams(): HttpParams {
    return new HttpParams({
      encoder: PARAMETER_CODEC
    });
  }

而编码器是，

class ParameterCodec implements HttpParameterCodec {
  encodeKey(key: string): string {
    return encodeURIComponent(key);
  }

  encodeValue(value: string): string {
    return encodeURIComponent(value);
  }

  decodeKey(key: string): string {
    return decodeURIComponent(key);
  }

  decodeValue(value: string): string {
    return decodeURIComponent(value);
  }
}
const PARAMETER_CODEC = new ParameterCodec();

Answer 1

如果您想知道为什么没有传递参数，参考 HttpParams 文档中有一个关键提示

这个类是不可变的——所有的变异操作都会返回一个新的 实例。

基本上，您应该能够通过这样的链接来发送参数/查询以具有多个参数：

    const params = new HttpParams()
        .set('query', 'value here')
        .set('another_param', 'value_here')
        .set('sortby', sortby.toString());

return this.httpClient.get('my url', { params })

如果您想有条件地附加 HttpParams，请改用它的变体，例如：

let params = new HttpParams();
if ( limit ) {
  params = params.set('limit', String(limit));
}
params = params.set('search', keyword);