如何在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传递给过滤管以进行匹配和过滤。到目前为止一切都好。

但是，我无法弄清楚如何扩展它以允许多个潜在的Params，其中大多数是空白/不需要。

我可以想象我需要通过queryParam定义一个包含所有活动过滤器的数组，但是我能找到的唯一文档只显示了传递一个参数的示例。我试过玩：

{queryParams: { pass an array here! }}

但是如果我把任何东西放在一个键：值对之外，我的IDE会注册一个错误。

我可能只是每次添加所有可能的过滤器及其值，但每次都会创建一个愚蠢的URL字符串，大多数值为空或全部等等，不是很漂亮。

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

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

我希望这是有道理的，如果有人有建议我会很感激，即使这意味着以不同的方式传递数据。例如，我现在正在寻找是否可以通过创建单独的过滤器服务并使用@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看起来有点难看，但它应该是有用的。尝试一下，我希望它可以帮助你;）

Answer 2

试试这个。

this.router.navigate(['/findlist'], { queryParams: { param1: 'value1', 'param2': 'value2' } }); 

然后网址看起来像

localhost:4200/findlist?param1=value1&param2=value2 

最后，您可以使用下面的代码段找回路线参数，

this.route.queryParams.subscribe((p: any) => {
    if (p.param1){
        console.log(JSON.parse(p.param1));
    }
 if (p.param2){
        console.log(JSON.parse(p.param2));
    }
});