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} });未定，则会被忽略，而是追加所有查询参数。

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

默认值是不可接受的，因为它仍然会产生一个粗略的网址。非常感谢你们

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

相同的链接 - 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路径中。＆＃34;英雄＆＃34;的路径路线没有：id令牌。

可选路由参数不用＆＃34;？＆＃34;和＆＃34;＆amp;＆＃34;因为它们将在URL查询字符串中。它们用分号隔开＆＃34 ;;＆＃34;这是矩阵URL表示法 - 您可能以前从未见过。

看看此链接可能会有所帮助 - 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})
}

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

2 个答案: