Программно добавление параметров запроса в маршрут, если используется query param

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, если используется параметр запроса. Я понятия не имею, как это сделать, и начал свое исследование.

значения по умолчанию недопустимы, так как это все равно приведет к получению общего URL. Спасибо всем большое

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

Answer 2

Это довольно сложно, потому что есть много открытых вопросов для того же.

Одна такая проблема в 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://stackru.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";",

Значение идентификатора появляется в URL как (;id=15;foo=foo), а не в пути URL. Путь для маршрута "Герои" не имеет токена:id.

Необязательные параметры маршрута не разделяются знаком "?" и "&", как они будут в строке запроса URL. Они разделены точкой с запятой ";" Это матричная нотация URL - то, чего вы раньше не видели.

Взгляните на эту ссылку, может помочь - https://angular.io/guide/router