Angular: добавить параметры запроса к URL

Это можно заархивировать с помощью класса Router:

Использование компонента:

import { Router, ActivatedRoute } from '@angular/router';

@Component({})
export class FooComponent {
   constructor(
     private _route: ActivatedRoute,
     private _router: Router
   ){}

   navigateToFoo(){
     // changes the route without moving from the current view or
     // triggering a navigation event,
     this._router.navigate([], {
      relativeTo: this._route,
      queryParams: {
        newOrdNum: '123'
      },
      queryParamsHandling: 'merge',
      // preserve the existing query params in the route
      skipLocationChange: true
      // do not trigger navigation
    });
   }
}

Для получения дополнительной информации см. эту книгу и angular API маршрутизатора

Пришлось немного подкорректировать ответ Jota.Toledos, чтобы он работал у меня, пришлось вынести второе и последнее свойство экстры — объект:

   navigateToFoo(){
     this._router.navigate([], {
      queryParams: {
        newOrdNum: '123'
      },
      queryParamsHandling: 'merge',
    });
   }

Вы должны написать

let params = new HttpParams();
params = params.append('newOrdNum','123');

Вы должны использовать модуль Router. проверьте этот документ: https://angular.io/guide/router

Вам нужно импортировать эти модули: import { Router, ActivatedRoute, ParamMap } from '@angular/router';

Вы захотите взять текущее состояние параметров запроса из Angular Router, изменить эти реквизиты (добавить/удалить параметры), а затем переназначить их с помощью Router:

// Make sure to import and define the Angular Router and current Route in your constructor
constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

...
...
...

// Take current queryParameters from the activated route snapshot
const urlParameters = Object.assign({}, this.route.snapshot.queryParams); 

// Need to delete a parameter ?
delete urlParameters.parameterName;

// Need to add or updated a parameter ?
urlParameters.parameterName = newValue;

// Update the URL with the Angular Router with your new parameters
this.router.navigate([], { relativeTo: this.route, queryParams: urlParameters });

Вы даже можете пойти дальше и создать вспомогательную функцию для этого:

handleUrlParameters(paramsToAdd: {param: string}[], paramsToDelete?: string[]) {
  const urlParameters = Object.assign({}, this.route.snapshot.queryParams); 

  paramsToDelete.forEach(param => delete urlParameters[param]);

  Object.keys(paramsToAdd).forEach(param => urlParameters[param] = paramsToAdd[param]);

  this.router.navigate([], { relativeTo: this.route, queryParams: urlParameters });
}

А затем вы просто вызываете handleUrlParameters с объектом, сопоставляющим параметр с новыми значениями, или с массивом имен параметров для удаления.

Убедитесь, что при передаче значения параметров запроса не должно быть неопределенным.

      this.router.navigate([yourRoute,
         queryParams : 
              {
                key : (yourValue ? yourValue : '')
              },
         queryParamsHandling: 'merge'
            ]);
      

this.router.navigate(['.'], { relativeTo: this.route, queryParams: { 'a': 'b' }, queryParamsHandling: 'merge', skipLocationChange: true});

маршрутизатор: Маршрут маршрутизатора: ActivatedRoute