Angular使用HttpRequest发起GET请求时HttpParams参数未发送的问题

代码中查询参数没有被携带到请求的本质原因是：Angular框架提供的HttpParams是不可变（Immutable）对象，所有调用set()、append()这类修改参数的方法，都不会改动当前实例本身，而是会返回一个携带了最新参数集合的全新HttpParams实例。
之前的代码执行完params.set("page", "4")后，没有把方法返回的新实例赋值给原params变量，导致传入请求配置的还是最初初始化的空HttpParams，自然不会在请求URL上拼接查询参数。

• let params = new HttpParams() 初始化了一个没有任何查询参数的空HttpParams实例
• params.set("page", "4") 方法执行时会生成带page=4参数的新对象，但这个新对象没有被赋值回params变量，原params始终是空状态
• 最终HttpRequest配置里传入的params是空对象，发出的请求自然不会携带指定的查询参数

写法1：接住set方法的返回值 #

在调用set方法时，把返回的新HttpParams实例重新赋值给params变量，也可以直接用链式写法一步完成初始化：

// 链式写法，直接拿到带参数的实例
let params = new HttpParams().set("page", "4");

// 等价的分步写法：
// let params = new HttpParams();
// params = params.set("page", "4");

写法2：初始化时直接构造带参数的HttpParams #

可以在实例化HttpParams时就通过配置项传入所有需要的查询参数，省去分步调用set的步骤，代码可读性更强，适合参数较多的场景：

const params = new HttpParams({
  fromObject: {
    page: "4"
  }
});

两种写法配置好params后，传给HttpRequest的参数即可正常生效，Angular的HttpClient会自动把params里的参数拼接到请求URL上，和手动拼接?page=4的效果完全一致，不需要硬编码URL字符串。

内容的提问来源于stack exchange，提问作者Victor Soares