Я пытаюсь обновить (добавить, удалить) 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: правда }
.
Редактировать:
Как уже отмечалось в комментариях, []
и 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
) { }
}
это.маршрутизатор.перейти([], { queryParams: {параметр _id: на "Азбука" в день: "и 1" С, название: с "ТТС" и} });
Он будет обновлять параметры запроса в текущем я.электронная активированного маршрут
это.маршрутизатор.перейти(['/Азбука'], { 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
}