如何在 Angular2 中处理多个 queryParams

Question

我正在尝试在新的 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! }}

但是如果我在 key:value 对以外的地方放了任何东西，我的 IDE 就会注册一个错误。

我可能每次都可以添加所有可能的过滤器及其值，但是每次都会创建一个非常长的 URL 字符串，大多数值为空白或 All 等，不是很漂亮。

所以我认为我的工作流程应该是在发送端我维护一个包含所有过滤器及其状态的数组，然后每次点击一个过滤器按钮时，我首先更新数组中的相关值，然后传递整个数组通过查询参数。

在接收端，我必须以某种方式接收和处理 Param 作为数组，然后将每个条目提取为变量，然后在过滤器中进行处理。我也想要 DRY，所以真的不希望接收端的几个语句有效地为不同的属性做同样的事情，简单地说，循环遍历数组更有意义。

我希望这是有道理的，如果有人提出建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我目前正在查看是否可以通过创建单独的过滤器服务并使用 @Input 传递数据来传递数据。

感谢收到任何想法（自学的业余爱好者，所以可能会遗漏一些明显的东西！）

谢谢

托尼

Answer 1

你可以这样尝试：

使用查询参数定义一个数组：

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 看起来有点难看，但它应该是有用的。尝试一下，希望对你有帮助；）