Очистить все queryParams с помощью нового Router v3 Angular2

Я пытаюсь выяснить, как использовать навигацию маршрутизатора Angular2 (маршрутизатор 3.0.0-alpha.7) с параметрами запроса.

Я могу легко перейти к маршруту с помощью запросаParam с помощью этой строки:

this._router.navigate(['/login'], {queryParams: {redirect: 'route1'}});

В компоненте "/login" я делаю логин, который будет перенаправлен на маршрут redirect, а именно route1 здесь. Однако после перенаправления параметры запроса redirect остаются в URL-адресе, т.е. Я сейчас на странице /route1?redirect=route1. Я хочу удалить параметр перенаправления здесь.

Кроме того, если я затем перейду на другую страницу с тем же redirect queryParam, она не перезапишет предыдущую, а добавит еще один ?redirect=... в url. А именно:

this._router.navigate(['/another-route'], {queryParams: {redirect:'route2'}});

приводит меня к /another-route?redirect=route2?redirect=route1

Можно ли очистить queryParams при навигации по маршрутам? Я пробовал this._router.navigate(['/route1'], {queryParams: {redirect: null}}); или {queryParams: null} и т.д., Но не имел успеха.

ОТВЕТЫ

Ответ 1

Я тоже боролся с этим. Вы ожидаете, что маршрутизатор очистит параметры запроса по умолчанию при навигации по другому маршруту...

Вы можете сделать

this._router.navigate(['/route1'], {queryParams: {}});

или

this._router.navigateByUrl('/route1');

или при использовании routerLink:

<a [routerLink]="['/applications']" [queryParams]="{}"> Applications</a>

Ответ 2

На самом деле... вы НЕ должны "ожидать, что маршрутизатор очистит параметры запроса".

Ясно, что вы этого ожидаете. Но это потому, что вы не знаете о важном решении дизайна маршрутизатора... возможно, потому что, к сожалению, мы еще не говорили вам об этом в документах. Сейчас мы исправляем это.

QueryParams предназначены для параметров, которые являются глобальными в навигации; они не меняются.

MatrixParams относятся к параметрам, которые относятся к текущей навигации; они меняются.

Что принадлежит глобальному QueryParams? Вещи, поступающие с сервера, являются кандидатами. Как auth-токены, которые принадлежат каждому взаимодействию.

Но требуемые параметры маршрута (:id in customer/:id) и необязательные параметры матрицы (например, ;name=Jo* in /customers;name=Jo*) являются локальными для одного навигации. Это то, как вы можете указать навигацию для клиентов с дополнительным фильтром имен.

Независимо от того, согласны ли вы с этим подходом, это принципиально для дизайна маршрутизатора v.3.

Я предлагаю корректировать ваши ожидания, а не бороться с ним.

Ответ 3

Вы можете попробовать:

this.router.navigate(['target'], {preserveQueryParams: false});