3

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

我有以下变量

  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}

  });

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

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

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

4

2 回答 2

0

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

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})
}
于 2017-07-12T16:04:08.480 回答
0

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

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 上的一个要点中找到的这段代码。您可以在路由器中使用解析。获取参数并检查。

相同的链接 - https://gist.github.com/e-oz/5a95f50336e68623f9e0

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

  getParameters() {
    // http://stackoverflow.com/a/2880929/680786
    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 路径中。“英雄”路线的路径没有 :id 标记。

可选路由参数不以“？”分隔 和“&”，就像它们在 URL 查询字符串中一样。它们用分号“;”隔开 这是矩阵 URL 表示法——您以前可能没有见过。

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

于 2017-07-12T16:00:54.713 回答