Angular2, как очистить параметры запроса URL-адреса на маршрутизаторе

Я борюсь с очисткой URL-параметров во время навигации в Angular 2.4.2. Я попытался установить каждый параметр, чтобы очистить параметры в приведенной ниже навигационной строке, или любой микс в нем с помощью навигации или navigateByUrl, но не могу понять, как это сделать.

this.router.navigateByUrl(this.router.url, { queryParams: {}, preserveQueryParams: false });

В качестве примера я нахожусь на маршруте /section1/page1?key1=abc&key2=def и хочу остаться на том же маршруте, но удалить все параметры URL-адреса, поэтому конечный результат должен быть /section/page1

Ответ 1

Как указывал DeborahK, когда я переходил к this.router.url, этот URL уже имел встроенные параметры url. Чтобы решить, я удалил параметры с URL-адреса в виде строки, а затем использовал navigateByUrl для перехода туда.

let url: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(url);

Ответ 2

Использование navigateByUrl приведет к отбрасыванию параметров запроса, если вы передадите ему URL без параметров запроса.

Или вы могли бы попробовать:

this.router.navigate(this.router.url, { queryParams: {}});

ПРИМЕЧАНИЕ: navigate, а не navigateByUrl

Это работает?

Ответ 3

Если вы не хотите перезагрузить страницу, вы также можете использовать Location

import { Location } from '@angular/common';
[...]
this.location.replaceState(this.location.path().split('?')[0], '');

this.location.path() предоставляет вам текущий путь. Вы можете удалить параметры, сбросив путь к странице со всем в URL до ? ,

Ответ 4

Используйте параметр skipLocationChange, и он не будет показывать параметры: предположим, что ваш URL

HTTP://локальный/просмотр

Теперь что-то в вашем коде устанавливает параметры запроса

? Д = & все viewtype = общее

без skipLocationChange ваш URL в браузере (после вызова навигации) будет:

HTTP://локальный/вид д = все & viewtype = общее

с skipLocationChange: правда, это остается

HTTP://локальный/просмотр

let qp = { q : "all" , viewtype : "total" } 
this.router.navigate(['/view'], {  queryParams: qp,skipLocationChange: true });

Ответ 5

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

Из документов:

Перемещается при замене текущего состояния в истории.

this.router.navigate([], { replaceUrl: true});