typescript 如何在Angular2中处理多个queryParams

sxissh06 于 2022-12-05 发布在 TypeScript

关注(0)|答案(3)|浏览(151)

我正在尝试在一个新的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等，不是很漂亮。
因此，我认为我的工作流应该是在发送端维护一个包含所有筛选器及其状态的数组，然后每次单击其中一个筛选器按钮时，我首先更新数组中的相关值，然后通过queryParams传递整个数组。
在接收端，我必须以数组的形式接收和处理Param，然后将每个条目提取为变量，然后在过滤器中进行处理。我也希望是DRY，所以我不希望在接收端的几个语句对不同的属性有效地做同样的事情，简单地说，循环遍历数组更有意义。
我希望这是有意义的，如果有人有建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我现在正在寻找是否可以通过创建一个单独的过滤服务并使用@Input传递数据来传递数据。
任何想法都很感激（自学成才的业余爱好者，所以可能错过了一些明显的东西！）
谢谢
东尼

typescript

来源：https://stackoverflow.com/questions/41264722/how-to-handle-multiple-queryparams-in-angular2

3条答案

按热度按时间

2sbarzqh1#

你可以这样尝试：
使用查询参数定义数组：

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看起来有点难看，但是应该是有功能的。试试看，希望对你有帮助;）

赞(0）回复(0）举报 2022-12-05

zsohkypk2#

试试这个

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

然后URL看起来像

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

赞(0）回复(0）举报 2022-12-05

0md85ypi3#

我确实喜欢下面的代码。它对我很有效。

onSubmit() {
    let query = {}
    query['age'] = '50'
    query['gender'] = 'male'      
    this.router.navigate(["/go"], { queryParams: query})
  }

网址应该是localhost：4200/go？年龄= 50 &性别=男性
最后，您可以订阅查询参数。

赞(0）回复(0）举报 2022-12-05

我来回答

typescript 如何在Angular2中处理多个queryParams

3条答案

相关问题

热门标签

最新问答