在 Angular 中处理多个查询参数答案

【问题标题】：Handling multiple query parameters in Angular在 Angular 中处理多个查询参数
【发布时间】：2019-07-16 18:25:55
【问题描述】：

我正在使用 Angular 材质选项卡，我想使用查询参数将选定的选项卡保存在 URL 中（我只有 2 个选项卡）。此外，当我在选项卡 1 上时，我必须有 2 个查询参数，一个用于选定选项卡，一个用于另一个选定值（inspectionChecklistId）。我的问题是，当我在第二个选项卡上时，我尝试更新现有参数（selectedTab）并同时添加新参数（inspectionChecklistId），因为第一个参数没有更新。不得不提的是，我正在使用一种方法来更新查询参数。

我正在使用这个方法来更新一个查询参数：

updateQueryParams(name: string, value: number){
  this.router.navigate([], {
    relativeTo: this.activatedRoute,
    queryParams: {
      [name]: value
    },
    queryParamsHandling: "merge"
 });
}

我尝试像这样更新查询参数：在构造函数中，我只使用选定的选项卡参数调用了一次该方法：

constructor(private router: Router, private activatedRoute: ActivatedRouter) {
   this.updateQueryParams('selectedTab', 0);
}

在每次更改选项卡时调用的方法中，我做了这样的事情：

onSelectedIndexChanged(index: number){
  this.updateQueryParams('selectedTab', index);

  if(index === 1) {
    this.updateQueryParams('inspectionChecklistId', -1);
  } else {
    this.updateQueryParams('inspectionChecklistId', null);
  }
}

我也尝试像这样更改 updateQueryParams：

updateQueryParams(...queryParams) {
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: {
        ...queryParams
      },
      queryParamsHandling: "merge"
    });
}

并使用如下方法：

  onSelectedIndexChanged(index: number) {
    if (index === 1) {
      this.updateQueryParams(
        { name: "selectedTab", value: index },
        { name: "inspectionChecklistId", value: -1 }
      );
    } else {
      this.updateQueryParams({ name: "inspectionChecklistId", value: null });
    }
  }

但是使用扩展类型，像我一样添加整个查询参数数组是错误的，我不知道如何分别添加每个元素。

这就是我想要的：

-tab 0 is selected (the first one) => localhost:4200/?selectedTab=0
-tab 1 is selected (the second one) => localhost:4200/?selectedTab=1&inspectionChecklistId=-1

但是现在，selectedTab 没有改变。

【问题讨论】：

标签： angular

【解决方案1】：

你不需要使用传播类型，只需传递一个Params类型的参数：

updateQueryParams(queryParams) {
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams,
      queryParamsHandling: 'merge'
    });
  }

在您的构造函数中，传递 params 对象：

constructor(private router: Router, private activatedRoute: ActivatedRoute) {
  this.updateQueryParams({selectedTab: 0});
}

当tab改变时，只调用一次函数，同时传递两个查询参数：

onSelectedIndexChanged(index: number) {
  const inspectionChecklistId = index === 1 ? -1 : null;
  this.updateQueryParams(
    {
      selectedTab: index,
      inspectionChecklistId
    }
  );
}

【讨论】：