5

我正在尝试在新的 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 作为数组,然后将每个条目提取为变量,然后在过滤器中处理。我也想干,所以真的不希望接收端的几个语句有效地为不同的属性做同样的事情,简单地说,循环遍历一个数组更有意义。

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

感激地收到任何想法(自学成才的业余爱好者,所以可能遗漏了一些明显的东西!)

谢谢

托尼

4

2 回答 2

4

你可以这样尝试:

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

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

你会看到这样的东西:

Chrome 开发者工具截图

现在你可以解析这个对象了。我认为 URL 看起来有点难看,但它应该是功能性的。试试看,希望对你有帮助;)

于 2016-12-22T12:06:00.387 回答
1

尝试这个。

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));
    }
});
于 2018-09-10T12:19:51.563 回答