如何在Angular及Angular 8中向拦截器传递查询参数？

没问题！我来给你详细讲清楚怎么在Angular拦截器里传递查询参数，顺便明确说一句：Angular 8完全支持这个操作，放心用👇

核心逻辑 #

拦截器的核心作用就是在HTTP请求发出前拦截并修改它，传递查询参数的思路很直接：

• 先构建你要添加的自定义查询参数
• 合并原始请求已有的参数（避免覆盖原有业务参数）
• 克隆并返回修改后的请求

具体代码实现（适配Angular 8） #

下面是完整的拦截器代码，直接包含你提供的参数构建逻辑：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpInterceptor, HttpParams } from '@angular/common/http';

@Injectable()
export class QueryParamInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler) {
    // 你提供的参数构建逻辑，这里额外加了默认值避免null异常
    const customParams = new HttpParams()
      .set('lang', localStorage.getItem('language') || 'en')
      .set('android_version', '1');

    // 合并原始请求参数与自定义参数：如果原始请求已有params就追加，没有则直接用自定义参数
    const finalParams = request.params ? request.params.appendAll(customParams) : customParams;

    // 克隆请求（Angular的HttpRequest是不可变对象，必须通过clone修改属性）
    const modifiedRequest = request.clone({
      params: finalParams
    });

    // 传递修改后的请求继续往下处理
    return next.handle(modifiedRequest);
  }
}

关键细节说明 #

• 不可变请求对象：Angular的HttpRequest设计为不可变对象，所以必须用clone()方法修改参数，不能直接修改原始请求，这是框架的硬性要求。
• Angular 8兼容性：绝对没问题！HttpInterceptor从Angular 4就正式引入，Angular 8时这个API已经非常稳定，HttpParams的set、appendAll等方法在Angular 8中完全支持，上面的代码可以直接在Angular 8项目中使用。
• 避免空值异常：我在你的代码基础上加了|| 'en'，防止localStorage.getItem('language')返回null时，lang参数值为空导致请求异常，你可以根据业务需求调整默认值。
• 不覆盖原有参数：用appendAll而非直接替换参数，这样原始请求带的业务参数（比如列表分页的page、size）不会被覆盖，会和我们添加的参数共存。

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