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

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 未定义，它将被忽略，而不是附加所有查询参数。

所以现在我希望将查询参数附加到查询参数参数，如果使用查询参数的话。我不知道该怎么做并开始了我的研究。

默认值是不可接受的，因为它仍然会产生毛url。非常感谢大家

Answer 1

这很棘手，因为同样有很多未解决的问题。

git 中的一个这样的问题 - https://github.com/angular/angular/issues/12347

要么你必须有可选的路由，例如每种类型的查询参数，例如

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: ':product', component: ProductComponent, resolve: { product: ProductResolver } },
    { path: ':product/:card', component: ProductComponent, resolve: { product: ProductResolver } },
    { path: ':product/:group/:card', component: ProductComponent, resolve: { product: ProductResolver } }];

或者您可以查看我在 github 上的一个要点中找到的这段代码。您可以在您的路由器解析中使用。获取参数并检查。

Link 同样 - https://gist.github.com/e-oz/5a95f50336e68623f9e0

export class UrlParser
{
  getParameter(key) {
    return this.getParameters()[key];
  }

  getParameters() {
    // 
    var match,
      pl = /\+/g,  // Regex for replacing addition symbol with a space
      search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
      query = window.location.search.substring(1);

    let urlParams = {};
    while (match = search.exec(query)) {
      urlParams[decode(match[1])] = decode(match[2]);
    }
    return urlParams;
  }

  setParameter(key:string, value) {
    let params = this.getParameters() || {};
    if (params[key]==value) {
      return true;
    }
    params[key] = value;
    let search = [];
    for (let k in params) {
      if (params.hasOwnProperty(k)) {
        search.push(encodeURIComponent(k)+"="+encodeURIComponent(params[k]));
      }
    }
    let query = '?'+search.join('&');
    let history = DOM.getHistory();
    if (history && history.replaceState) {
      history.replaceState(null, '', location.pathname+query);
    } else {
      return false;
    }
    return true;
  }
}

更新

我认为它已在新路由器中处理，如 GIT - https://github.com/angular/angular/issues/3525

中的一张票中所述

现在可选路线由 localhost:3000/heroes;id=15;foo=foo ";".

分隔

id 值在 URL 中显示为 (;id=15;foo=foo)，而不是在 URL 路径中。 "Heroes" 路由的路径没有 :id 标记。

可选路由参数没有用“？”分隔和 URL 查询字符串中的“&”。它们之间用分号“;”隔开这是矩阵 URL 表示法——你以前可能没见过。

看看这个 link 可能会有帮助 - https://angular.io/guide/router#route-parameters-required-or-optional

Answer 2

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

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

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

programmatically appending query params to route if queryparam is used

angular

router

queryparam