如何在Angular中向queryParams传递数组值并生成指定格式URL

Angular 路由默认的查询参数序列化逻辑，会将传入的数组类型参数处理为重复同键的格式（比如id=[1,2,3]会被拼接为?id=1&id=2&id=3），和预期的单参数携带[1,2,3]字面量的URL格式不匹配。要实现目标效果，需要通过实现自定义查询参数序列化器替换默认逻辑。

实现步骤 #

1. 编写实现QueryParamSerializer接口的自定义序列化类
   核心逻辑是在序列化阶段识别数组类型的参数值，直接拼接为[元素1,元素2,...]的字符串格式，同时配套实现反序列化逻辑，保证从URL读取参数时能正确解析回数组结构。示例代码如下：

   import { QueryParamSerializer, Params } from '@angular/router';
   
   export class CustomArrayQuerySerializer implements QueryParamSerializer {
     // 序列化阶段：把参数对象转成URL查询字符串
     serialize(params: Params): string {
       const queryParts: string[] = [];
       Object.keys(params).forEach(key => {
         const value = params[key];
         // 跳过null、undefined类型的参数，不会拼到URL上
         if (value === null || value === undefined) return;
         // 数组类型直接序列化为方括号包裹的逗号分隔字符串
         if (Array.isArray(value)) {
           const arrContent = value.join(',');
           queryParts.push(`${encodeURIComponent(key)}=[${arrContent}]`);
         } else {
           queryParts.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
         }
       });
       return queryParts.length ? `?${queryParts.join('&')}` : '';
     }
   
     // 反序列化阶段：把URL上的查询字符串解析回参数对象
     parse(queryStr: string): Params {
       const result: Params = {};
       if (!queryStr) return result;
       // 去掉开头的?符号，按&拆分每个参数
       queryStr.replace(/^\?/, '').split('&').forEach(part => {
         if (!part) return;
         const [rawKey, rawValue = ''] = part.split('=');
         const key = decodeURIComponent(rawKey);
         // 匹配方括号格式的数组值
         const arrayValueMatch = rawValue.match(/^\[(.*)\]$/);
         if (arrayValueMatch) {
           // 拆分逗号分隔的元素，转成数字类型数组
           const items = arrayValueMatch[1].split(',')
             .filter(item => item !== '')
             .map(Number);
           result[key] = items;
         } else {
           result[key] = decodeURIComponent(rawValue);
         }
       });
       return result;
     }
   }
   

2. 在根路由模块注册自定义序列化器
   通过依赖注入把Angular默认的查询参数序列化器，替换为编写的自定义实现，注册位置为应用根路由模块的providers数组中，示例代码：

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes, QueryParamSerializer } from '@angular/router';
   import { CustomArrayQuerySerializer } from './custom-query-serializer';
   
   const routes: Routes = [];
   
   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule],
     providers: [
       // 替换默认序列化器实现
       { provide: QueryParamSerializer, useClass: CustomArrayQuerySerializer }
     ]
   })
   export class AppRoutingModule { }
   

效果验证 #

配置完成后，原有跳转代码不需要做任何修改：

let obj = {
    id:[1,2,3],
    other:[],
    someValues:null
}

this.router.navigate([], {
  queryParams: { id: obj.id, other: obj.other }, 
  relativeTo: this.route
});

最终生成的URL格式为http://www.example.com/?id=[1,2,3]&other=[]，someValues为null会自动被跳过不拼接到URL上，完全符合预期。

注意事项 #

• 预期URL末尾的分号;不属于标准查询参数分隔符，是路由矩阵参数的语法标识，如果需要实现该效果，可以在自定义序列化器的serialize方法返回结果时，根据规则手动拼接对应后缀，但不推荐这种写法，容易和矩阵参数的解析逻辑产生冲突。
• 序列化和反序列化的逻辑需要保持对称，否则会出现参数读取异常的问题。

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