angular - 如果使用查询参数，则以编程方式将查询参数附加到路由

Question

我准备花一天时间研究这个问题，但我希望你们能得到答案，因为我认为否则这将是一整天的事情。

我有以下变量

  inputCity;
  inputGuestNumber;
  inputCapacitySelected;
  inputCuisineSelected;
  inputPrivacySelected;
  inputVenueTypeSelected;
  inputAmenitiesSelected;
  inputNeighborhoodSelected;

这些变量可能会也可能不会填充或定义，具体取决于用户在表单中输入的信息。

我设置了当前的路由器:

onSubmit(){
    this.router.navigate(['/venue-list',
    this.inputCity], {queryParams:{guestCount: this.inputGuestNumber, countOption: this.inputCapacitySelected,
    cuisineSelected:this.inputCuisineSelected, privacySelected:this.inputPrivacySelected,
      venueTypeSelected: this.inputVenueTypeSelected, amenitiesSelected: this.inputAmenitiesSelected,
    neighborhoodSelected: this.inputNeighborhoodSelected}

  });

我以这种方式设置它，希望如果未定义queryparam，它将被忽略，而是附加所有查询参数。

所以现在我希望将查询参数附加到 queryparams 参数(如果使用查询参数)。我不知道如何做到这一点，并开始了我的研究。

默认值是 Not Acceptable ，因为它仍然会产生总网址。非常感谢大家

Answer 1

除了手动逐一检查每个参数之外，我不确定是否有任何简单的方法可以有条件地添加参数。可能更容易的是构建整个对象，然后过滤并删除丢失的对象。

onSubmit() {
    const queryParams = {
        guestCount: this.inputGuestNumber, countOption: this.inputCapacitySelected,
        cuisineSelected:this.inputCuisineSelected, privacySelected:this.inputPrivacySelected,
        venueTypeSelected: this.inputVenueTypeSelected, amenitiesSelected: this.inputAmenitiesSelected,
        neighborhoodSelected: this.inputNeighborhoodSelected
    }

    Object.keys(queryParams)
        .filter(key => queryParams[key] === null || queryParams[key] === undefined)
        .forEach(key => delete queryParams[key])

    this.router.navigate(['/venue-list', this.inputCity], {queryParams})
}