Угловой: Как обновить queryParams без изменения маршрута

Вы можете перейти к текущему маршруту с новыми параметрами запроса, который не будет перезагружать вашу страницу, но будет обновлять параметры запроса.

Что-то вроде (в компоненте):

в

constructor(private router: Router) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

Обратите внимание, что он выиграл'т перезагрузите страницу, он будет толкать новую запись в браузере'история. Если вы хотите, чтобы заменить его в истории вместо того, чтобы добавлять туда новое значение, вы могли бы использовать { queryParams: queryParams, replaceUrl: правда }.

Редактировать: Как уже отмечалось в комментариях, [] и relativeTo имущество было в моем исходном примере отсутствует, поэтому он мог бы также изменил маршрут, а не только параметры запроса. Правильное это.маршрутизатор.использование навигации будет в этом случае:

this.router.navigate(
  [], 
  {
    relativeTo: this.activatedRoute,
    queryParams: { myParam: 'myNewValue' },
    queryParamsHandling: 'merge'
  });

Установка нового значения параметра нуль будет удалить параметр из URL-адреса.

@Радослав Roszkowiak'ы ответ почти правильно за исключением того, что relativeTo: это.маршрут требуется как ниже:

constructor(
  private router: Router,
  private route: ActivatedRoute,
) {}

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

В угловой 5 Вы можете легко получить и модифицировать копия urlTree путем анализа текущего URL. Это будет включать параметры запросов и фрагментов.

  let urlTree = this.router.parseUrl(this.router.url);
  urlTree.queryParams['newParamKey'] = 'newValue';

  this.router.navigateByUrl(urlTree); 

В "правильный путь", чтобы изменить параметр запроса, вероятно, с createUrlTree, как показано ниже, который создает новый UrlTree от текущей, позволяя нам изменять его, используя NavigationExtras.

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

constructor(private router: Router) { }

appendAQueryParam() {

  const urlTree = this.router.createUrlTree([], {
    queryParams: { newParamKey: 'newValue' },
    queryParamsHandling: "merge",
    preserveFragment: true });

  this.router.navigateByUrl(urlTree); 
}

Для того, чтобы удалить параметр запроса, таким образом, вы можете установить его, чтобы не определено или null.

Попробовать

this.router.navigate([], { 
  queryParams: {
    query: value
  }
});

будет работать для тех же маршруту, кроме одиночных кавычек.

Если вы хотите изменить параметры запроса без изменения маршрута. смотрите ниже пример может помочь вам: текущий маршрут является : поиск &ампер; цель маршрута(без перезагрузки страницы) : /поиск?запрос=любовь

submit(value: string) {
{ this.router.navigate( ['.'],  { queryParams: { query: value } })
    .then(_ => this.search(q));
}
search(keyword:any) { 
//do some activity using }

обратите внимание : вы можете использовать этот.маршрутизатор.перейти( ['поиск'] Вместо этот.маршрутизатор.перейти( ['.']

Ответ с большинством проголосовать частично работал для меня. Url браузера осталась прежней, но мое routerLinkActive больше не работает после навигации.

Мое решение было использовать lotation.перейти:

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

Я использовал HttpParams для построения строки запроса, так как я уже использовал его для отправки информации с помощью HttpClient. но вы можете просто построить его самостоятельно.

и это._router.URL-адрес.Сплит(" Ну?&и")[0], чтобы удалить все предыдущие строки запроса из текущего URL.

Во-первых, нам нужно импортировать модуль маршрутизатора с угловой маршрутизатор и объявить его псевдоним

import { Router } from '@angular/router'; ---> import
class AbcComponent implements OnInit(){
constructor(
    private router: Router ---> decalre alias name
  ) { }
}

1. Вы можете изменить параметры запроса с помощью "и маршрутизатор.перейти на" функции и передачи параметров запроса

это.маршрутизатор.перейти([], { queryParams: {параметр _id: на "Азбука" в день: "и 1" С, название: с "ТТС" и} });

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

2. Ниже вы будете перенаправлены на страницу ABC с поля _id, день и имя как параметры запроса

это.маршрутизатор.перейти(['/Азбука'], { queryParams: {параметр _id: на "Азбука" в день: "и 1" и, имя: на "ТТС" и} });

Он будет обновлять параметры запроса в "Азбуке" в путь вместе с тремя параметры запроса

Для извлечения параметров запроса:-

    import { ActivatedRoute } from '@angular/router'; //import activated routed

    export class ABC implements OnInit {

    constructor(
        private route: ActivatedRoute //declare its alias name
      ) {}

    ngOnInit(){
       console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
    }