如何使用Angular HttpClient拼接带数组查询参数的URL

实现核心 #

Angular默认不会将数组参数自动序列化为多个同名查询参数，我们可以通过HttpParams的append方法逐个添加数组元素来实现需求。

实现代码 #

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CinemaService {
  constructor(private http: HttpClient) {}

  fetchCinemas(ids: string[] = ["1","2","3"]) {
    // 初始化空参数对象
    let params = new HttpParams();
    // 遍历数组，逐个添加同名参数ids
    ids.forEach(id => {
      // HttpParams为不可变对象，每次修改后需重新赋值
      params = params.append('ids', id);
    });

    // 发起请求，生成的URL与需求完全匹配
    return this.http.get('https://localhost:8080/cinemas', { params });
  }
}

注意事项 #

• 不要使用set方法添加参数：set会覆盖已存在的同名参数，最终只会保留数组最后一个元素的参数
• 必须接收append方法返回的新HttpParams实例，否则参数不会生效

内容的提问来源于stack exchange，提问作者Guru Cse