如何在 Angular2 中处理多个 queryParams [英] How to handle multiple queryParams in Angular2

问题描述

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

但是如果我在键:值对之外添加任何内容，我的 IDE 就会注册一个错误.

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

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

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.

在接收端，我必须以某种方式接收和处理参数作为数组，然后将每个条目提取为变量，然后在过滤器中进行处理.我也想要 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));
    }
});

您会看到如下内容:

现在你可以解析这个对象了.我认为 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！