Angular13中使用HttpClient动态传递参数查询数据的方法

针对你需要动态传递可变参数的需求，推荐使用Angular HttpClient的**查询参数（Query Params）**来实现，相比路径参数，查询参数天然支持可选、动态组合的场景，后端也更容易处理。以下提供两种适配方案，根据你的后端接口要求选择：

方案一：所有参数（含page/pageSize）都用查询参数 #

如果后端允许将分页参数和筛选参数都放在URL查询串中（如/inventory?page=1&pageSize=10&categoryId=123），可以这样改造：

1. 修改inventoryService.ts #

将方法参数改为一个包含分页参数和可选筛选参数的对象，通过HttpParams动态构建查询参数（自动忽略值为null/undefined的参数）：

import { HttpParams } from '@angular/common/http';

// 可选：定义接口规范参数类型，增强类型提示
interface InventoryQueryParams {
  page: number;
  pageSize: number;
  categoryId?: number;
  brandId?: number;
  modelId?: number;
  // 其他需要的参数可在此扩展
}

getInventoryAllList(queryParams: InventoryQueryParams) {
  // 过滤无效参数，避免传递null/undefined值
  const filteredParams = Object.fromEntries(
    Object.entries(queryParams).filter(([_, value]) => value != null)
  );
  
  const params = new HttpParams({ fromObject: filteredParams });

  return this.httpClient
    .get<{data: InventoryModel[]}>(constants.GET_INVENTORY_LIST_URL, { params })
    .pipe(retry(constants.HTTP_SERVICE_RETRY), catchError(this.handleError));
}

2. 修改inventory.ts中的调用 #

根据需要动态传递参数组合：

// 仅传递categoryId
this.inventoryService.getInventoryAllList({
  page: this.page,
  pageSize: this.pageSize,
  categoryId: 123
}).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

// 传递brandId和modelId
this.inventoryService.getInventoryAllList({
  page: this.page,
  pageSize: this.pageSize,
  brandId: 456,
  modelId: 789
}).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

// 仅传递分页参数
this.inventoryService.getInventoryAllList({
  page: this.page,
  pageSize: this.pageSize
}).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

方案二：保留page/pageSize为路径参数，其他用查询参数 #

如果后端要求分页参数必须放在路径中（如/inventory/1/10），仅筛选参数用查询串，可以这样改造：

1. 修改inventoryService.ts #

将分页参数单独作为必填参数，筛选参数作为可选对象：

import { HttpParams } from '@angular/common/http';

// 可选：定义筛选参数类型
interface InventoryFilterParams {
  categoryId?: number;
  brandId?: number;
  modelId?: number;
}

getInventoryAllList(page: number, pageSize: number, filterParams?: InventoryFilterParams) {
  let params = new HttpParams();
  
  // 动态添加有效筛选参数
  if (filterParams) {
    Object.entries(filterParams).forEach(([key, value]) => {
      if (value != null) {
        params = params.append(key, value.toString());
      }
    });
  }

  return this.httpClient
    .get<{data: InventoryModel[]}>(`${constants.GET_INVENTORY_LIST_URL}/${page}/${pageSize}`, { params })
    .pipe(retry(constants.HTTP_SERVICE_RETRY), catchError(this.handleError));
}

2. 修改inventory.ts中的调用 #

// 仅传categoryId
this.inventoryService.getInventoryAllList(this.page, this.pageSize, { categoryId: 123 }).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

// 传多个筛选参数
this.inventoryService.getInventoryAllList(this.page, this.pageSize, { brandId: 456, modelId: 789 }).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

// 不传筛选参数
this.inventoryService.getInventoryAllList(this.page, this.pageSize).subscribe({
  next: (data) => console.log(data),
  complete: () => {},
  error: (e) => {}
});

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