Вы можете перейти к текущему маршруту с новыми параметрами запроса, которые не будут перезагружать вашу страницу, но будут обновлять параметры запроса.
Что-то вроде (в компоненте):
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 }
.
РЕДАКТИРОВАТЬ: как уже указывалось в комментариях, []
и relativeTo
в моем исходном примере свойство отсутствовало, поэтому оно могло также изменить маршрут, а не только параметры запроса. В this.router.navigate
этом случае правильным использованием будет:
this.router.navigate(
[],
{
relativeTo: this.activatedRoute,
queryParams: { myParam: 'myNewValue' },
queryParamsHandling: 'merge'
});
Установка нового значения параметра на null
удалит параметр из URL-адреса.
Радослав Рошковяк
источник
[]
вместо того,['.']
чтобы заставить его работатьthis.activatedRoute.queryParams.subscribe
и выполнить различные обновления в своем компоненте, но есть ли простой способ Angular просто загрузить маршрут, чтобы назад и вперед работали автоматически?@ Radosław Roszkowiak ответ почти правильный, за исключением того, что
relativeTo: this.route
требуется, как показано ниже:источник
В Angular 5 вы можете легко получить и изменить копию urlTree, проанализировав текущий URL. Это будет включать параметры и фрагменты запроса.
«Правильный способ» изменить параметр запроса - это, вероятно, использовать createUrlTree, как показано ниже, которое создает новый UrlTree из текущего, позволяя нам изменять его с помощью NavigationExtras .
Чтобы удалить параметр запроса таким образом, вы можете установить для него значение
undefined
илиnull
.источник
navigateByUrl
отличаетсяnavigate
- не только с параметром UrlTree. См stackoverflow.com/a/45025432/271012Пытаться
будет работать для навигации по тому же маршруту, кроме одинарных кавычек.
источник
Ответ с наибольшим количеством голосов частично сработал для меня. URL-адрес браузера остался прежним, но мой
routerLinkActive
больше не работал после навигации.Мое решение заключалось в использовании lotation.go:
Я использовал HttpParams для создания строки запроса, поскольку я уже использовал ее для отправки информации с помощью httpClient. но вы можете просто построить это самостоятельно.
и
this._router.url.split("?")[0]
, чтобы удалить всю предыдущую строку запроса из текущего URL.источник
this.location.path().split...
лучше?В итоге я объединился
urlTree
сlocation.go
Не уверен, что это
toString
может вызвать проблемы, но, к сожалениюlocation.go
, похоже, на основе строк.источник
Если вы хотите изменить параметры запроса без изменения маршрута. см. пример ниже, который может вам помочь: текущий маршрут: / search & Целевой маршрут (без страницы перезагрузки): / search? query = love
обратите внимание: вы можете использовать this.router.navigate (['search'] вместо this.router.navigate (['.']
источник
relativeTo:
, но он.then()
был полезен - не знал, что navigate () вернул обещание, так что рад, что вы опубликовали!Во-первых, нам нужно импортировать модуль маршрутизатора из углового маршрутизатора и объявить его псевдоним.
1. Вы можете изменить параметры запроса с помощью функции "router.navigate" и передать параметры запроса.
Он обновит параметры запроса в текущем, т.е. активированном маршруте.
Ниже приведено перенаправление на страницу abc с _id, днем и именем в качестве параметров запроса.
this.router.navigate (['/ abc'], {queryParams: {_id: "abc", день: "1", name: "dfd"}});
Он обновит параметры запроса в маршруте "abc" вместе с тремя параметрами запроса.
Для получения параметров запроса: -
источник