Кутова: Як оновити queryParams без зміни маршруту

Я намагаюся оновити (додати, видалити) queryParams з компонента. У angularJS це було можливо завдяки:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

У мене є додаток зі списком, який користувач може фільтрувати, замовляти тощо, і я хотів би встановити у queryParams URL-адреси всі активовані фільтри, щоб він міг скопіювати / вставити URL або поділитися ним з кимось іншим.

Однак я не хочу, щоб моя сторінка перезавантажувалася щоразу, коли вибрано фільтр.

Це можливо зробити з новим маршрутизатором?

Ви можете перейти до поточного маршруту за допомогою нових параметрів запитів, які не перезавантажать вашу сторінку, але оновлять параметри запитів.

Щось на зразок (у складі):

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: true }.

EDIT: Як уже вказувалося в коментарях, []і relativeToвластивість відсутня в моєму первісному прикладі, тому вона могла змінити і маршрут, а не лише параметри запитів. Правильне this.router.navigateвикористання буде в цьому випадку:

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

Якщо встановити нове значення параметра null, вилучите параметр з URL-адреси.

@ Радослав Рошковіак відповідь майже правильна, за винятком того, що relativeTo: this.routeпотрібно, як зазначено нижче:

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

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

У Angular 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); 
}

Щоб видалити параметр запиту таким чином, ви можете встановити його на undefinedабо null.

Спробуйте

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

буде працювати для тієї ж маршрутної навігації, крім одиничних лапок.

Відповідь з більшістю голосів частково працювала для мене. URL-адреса браузера залишилася колишньою, але routerLinkActiveпісля навігації мій більше не працював.

Моє рішення було використовувати lotation.go:

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. але ви можете просто побудувати його самостійно.

і this._router.url.split("?")[0], - це видалити весь попередній рядок запиту з поточної URL-адреси.

Я закінчила поєднання urlTreeзlocation.go

const urlTree = this.router.createUrlTree([], {
       relativeTo: this.route,
       queryParams: {
           newParam: myNewParam,
       },
       queryParamsHandling: 'merge',
    });

    this.location.go(urlTree.toString());

Не впевнений, чи toStringможе це викликати проблеми, але, на жаль location.go, здається, що він базується на рядках

Якщо ви хочете змінити параметри запиту без зміни маршруту. див. нижче приклад може допомогти вам: поточний маршрут: / пошук і цільовий маршрут (без сторінки для перезавантаження): / пошук? query = love

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

зверніть увагу: ви можете використовувати this.router.navigate (['пошук'] замість цього.router.navigate (['.']

Спочатку нам потрібно імпортувати модуль маршрутизатора з кутового маршрутизатора та оголосити його ім’я псевдоніма

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

1. Ви можете змінити параметри запитів за допомогою функції "router.navigate" та передати параметри запиту

this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
});

Він оновить параметри запитів у поточному, тобто активованому маршруті

2. Нижче буде переспрямовано сторінку abc з _id, днем ​​та назвою як параметри запитів

   this.router.navigate (['/ abc'], {queryParams: {_id: "abc", день: "1", назва: "dfd"}});

   Він оновить параметри запитів у маршруті "abc" разом із трьома параметрами запиту

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

    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
    }