如何在Angular2中处理多个queryParams

问题描述

我正在尝试在新的Angular2应用中实现过滤机制，这将允许我过滤数组中的条目列表.这些条目可能具有大约20个可以过滤的属性.到目前为止，我已经在一个组件中创建了一个过滤器列表，然后创建了一个作为子级路由到的列表组件.然后，我计划将过滤器作为queryParams通过路由器.只需一个过滤器就可以了:

I'm trying to implement a filtering mechanism in a new Angular2 app, that would allow me to filter a list of entries in an array. The entries may have around 20 properties that could be filtered on. I have so far created a list of filters in one component and then a list component that is routed to, as a child.I then planned to pass the filters as queryParams through the router. Starting with just one filter this was fine:

在发送方，我有:

this.router.navigate(['/findlist'], {queryParams: {'g': myParam}});

在接收方，我有:

this.subscription = this.route.queryParams.subscribe(
  (queryParam: any) => this.myFilter = queryParam['g']
);

然后我将myFilter传递到过滤器管道以进行匹配和过滤.到目前为止一切正常.

I then pass myFilter to a filter pipe to do the match and filter. All OK so far.

但是，我不知道如何扩大规模以允许多个潜在的参数，其中大多数将是空白/不需要.

However, I can't figure out how to scale this up to allow for multiple potential Params, most of which would be blank/not needed.

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

I can imagine that I would need to define an array holding ALL of the active filters through the queryParam, but the only documentation I can find, only ever shows examples with just one parameter passed. I've tried playing around with:

{queryParams: { pass an array here! }}

但是，如果我将除key:value对之外的任何其他内容放入IDE中，我的IDE都会注册一个错误.

But my IDE registers an error if I put anything in other than a key:value pair.

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

I could probably just add in all the possible filters and their values each time, but that would create a URL string stupidly long each time, with most values blank or All etc., not very pretty.

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

So I think my workflow should be that on the send side I maintain an array of all the filters and their states and then each time one of the filter buttons is clicked, I first update the relevant value in the array and then pass the whole array through queryParams.

在接收方，我必须以某种方式将Param接收并处理为数组，然后将每个条目提取为变量，然后在过滤器中进行处理.我也想成为DRY，所以真的不希望接收方的多个语句对不同的属性有效地做相同的事情，简而言之，循环遍历数组更有意义.

On the receive side somehow I have to receive and process the Param as an array and then extract each entry as variables to then process in the filter. I also want to be DRY, so don't really want several statements on the receive side effectively doing the same thing for different properties, simplistically it makes more sense to cycle through an array instead.

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

I hope that makes sense, I'd be grateful if anyone has a suggestion, even if it means passing the data in a different way. For example, I'm currently now looking to see whether I can just pass the data by creating a separate filter service and passing it using @Input instead.

感谢任何想法(自学成才的业余爱好者，所以很可能缺少明显的东西！)

Any ideas gratefully received(self taught amateur so probably missing something obvious !)

谢谢

托尼

推荐答案

您可以这样尝试:

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

Define an array with your query params:

myQueryParams = [
    { id: 1, param: 'myParam' },
    { id: 2, param: 'myParam' },
    { id: 3, param: 'myParam' },
    { id: 4, param: 'myParam' },
    { id: 5, param: 'myParam' },
];

将此数组放入单个查询参数中:

Put this array into one single query param:

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));
    }
});

您会看到类似这样的内容:

You'll see something like this:

现在您可以解析该对象.我认为该URL看起来有点难看，但是应该可以使用.尝试一下，希望对您有所帮助；)

Now you can parse this object. I think the URL looks a little bit ugly, but it should be functional. Try it out, I hope it helps you ;)

这篇关于如何在Angular2中处理多个queryParams的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！