我正在尝试在新的 Angular2 应用程序中实现过滤机制，这将允许我过滤数组中的条目列表。这些条目可能有大约 20 个可以过滤的属性。到目前为止，我已经在一个组件中创建了一个过滤器列表，然后创建了一个作为子组件路由到的列表组件。 然后我计划将过滤器作为 queryParams 通过路由器传递。从只有一个过滤器开始就可以了：
在发送端我有：
this.router.navigate(['/findlist'], {queryParams: {'g': myParam}});
在接收端，我有：
this.subscription = this.route.queryParams.subscribe(
(queryParam: any) => this.myFilter = queryParam['g']
);
然后，我将 myFilter 传递到过滤管道以进行匹配和过滤。到目前为止一切正常。
但是，我不知道如何扩展它以允许多个潜在参数，其中大多数参数是空白/不需要的。
我可以想象我需要通过 queryParam 定义一个包含所有活动过滤器的数组，但我能找到的唯一文档仅显示仅传递一个参数的示例。我试过玩：
{queryParams: { pass an array here! }}
但是，如果我将任何内容放入除键：值对之外的内容中，我的 IDE 就会出现错误。
我可能每次都添加所有可能的过滤器及其值，但这每次都会创建一个非常长的 URL 字符串，大多数值都是空白或全部等，不是很漂亮。
所以我认为我的工作流程应该是在发送端我维护一个所有过滤器及其状态的数组，然后每次单击其中一个过滤器按钮时，我首先更新数组中的相关值，然后传递整个数组通过查询参数。
在接收端，我必须以数组形式接收和处理 Param，然后将每个条目提取为变量，然后在过滤器中进行处理。我也希望做到 DRY，所以并不真正希望接收端的多个语句对不同的属性有效地执行相同的操作，简单地说，循环遍历数组更有意义。
我希望这是有道理的，如果有人有建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我目前正在寻找是否可以通过创建单独的过滤器服务并使用 @Input 传递数据来传递数据。
任何想法感激不尽 （业余自学，所以可能遗漏了一些明显的东西！）
Thanks
Tony
你可以这样尝试：
使用查询参数定义一个数组：
myQueryParams = [
{ id: 1, param: 'myParam' },
{ id: 2, param: 'myParam' },
{ id: 3, param: 'myParam' },
{ id: 4, param: 'myParam' },
{ id: 5, param: 'myParam' },
];
将此数组放入一个查询参数中：
this.router.navigate(['/findlist'], {
queryParams: {
filter: JSON.stringify(this.myQueryParams)
}
});
像这样读取查询参数：
this.route.queryParams.subscribe((p: any) => {
if (p.filter){
console.log(JSON.parse(p.filter));
}
});
你会看到这样的东西：
现在您可以解析这个对象了。我认为这个 URL 看起来有点难看，但它应该是有用的。尝试一下，希望对你有帮助；）