如何在Angular中配置in-memory-web-api适配路由参数与查询字符串

InMemoryWebApi本身自带RESTful路由支持，不需要在createDb里单独定义单个product对象，直接返回产品数组即可，它会自动处理GET /products/:id这类请求，从数组中匹配对应id的项。

修改你的DataService：

@Injectable({
  providedIn: 'root'
})
export class DataService implements InMemoryDbService {
  createDb(): { products: IProducts[] } {
    // 直接返回产品数组，无需单独定义单个product
    return { products: ProductsData.products };
  }
}

这样当你请求/products/123时，InMemoryWebApi会自动遍历products数组，找到id为123的产品并返回；如果没有匹配项，会返回404状态码。

如果需要处理带查询参数的请求（比如/products?category=phone&minPrice=500），可以通过重写InMemoryDbService的get方法实现自定义过滤逻辑：

@Injectable({
  providedIn: 'root'
})
export class DataService implements InMemoryDbService {
  createDb(): { products: IProducts[] } {
    return { products: ProductsData.products };
  }

  // 重写get方法处理查询参数
  get(req: HttpRequest<any>) {
    const db = this.createDb();
    let filteredProducts = [...db.products];
    const queryParams = new URLSearchParams(req.url.split('?')[1]);

    // 处理category查询参数
    if (queryParams.has('category')) {
      const category = queryParams.get('category');
      filteredProducts = filteredProducts.filter(p => p.category === category);
    }

    // 处理minPrice查询参数
    if (queryParams.has('minPrice')) {
      const minPrice = parseFloat(queryParams.get('minPrice')!);
      filteredProducts = filteredProducts.filter(p => p.price >= minPrice);
    }

    // 返回过滤后的结果
    return of(new HttpResponse({ status: 200, body: filteredProducts }));
  }
}

这种方式可以灵活适配任意自定义查询参数，根据业务需求添加对应的过滤规则即可。

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