Я перехожу к определенной странице в своем приложении с параметром запроса. После того, как я получу параметр из URL-адреса, я хочу его удалить, в идеале я бы это сделал:
let userToken: string;
this.sub = this.router
.routerState
.queryParams
.subscribe(params => {
userToken = params['token'];
params['token'].remove();
});
Но, очевидно, функция удаления не существует. Есть ли у кого-то альтернатива?
На всякий случай, если люди найдут эту ветку (как и я). У меня есть сценарий, который я получаю токен JWT в строке запроса (/login?jwt=token). Мне нужно было получить этот токен (и сохранить его и т.д.), Но затем нужно было убедиться, что он благополучно удален из URL. Перезагрузка маршрута входа в систему (с помощью this.router.navigate(['login']) работает в principe, однако пользователь может затем использовать кнопку возврата браузера, в основном воспроизводя логин токена.
Я решил это, не используя навигацию, а добавив сервис "Местоположение" (из @angular/common). Этот сервис имеет метод replaceState, который полностью удаляет токен из истории, а также из URL.
this.location.replaceState('login')
Надеюсь, что это помогает кому-то.
Вы можете назначить null конкретному запросуParam:
this.router.navigate([], {queryParams: {page: null}, queryParamsHandling: 'merge'});
ОБНОВЛЕНИЕ Нет необходимости добавлять queryParams в rc6 больше.
Не уверен, что это так:
После маршрутизации к компоненту с параметрами запроса все остальные URL-адреса этого компонента автоматически содержат параметры запроса. Каждый раз, когда вы переходите к другому URL-адресу, параметры запроса остаются.
Если это так, одно из возможных решений может быть в параметрах запроса в теге html
<a [routerLink]="['/abcd']" [queryParams]="{}">
Если нет, я также заинтересован в ответе: P
Императивный метод, но очиститель:
this.router.navigate(['.'], { relativeTo: this.route, queryParams: {} });
Я использую метод маршрутизатора navigateByUrl.
Альтернативный документ: Angular документация
Имейте в виду, что путь, которым вы его кормите, считается абсолютным. Вы не можете использовать относительную маршрутизацию компонентов с помощью этого метода.
Мое использование у меня есть компонент, который служит в качестве внешнего обратного вызова для событий auth, таких как сброс пароля и проверка электронной почты. По завершении операции любое действие навигации должно происходить через router.navigateByUrl(path)
HTML5 включает API history.pushState, который позволяет добавлять записи истории и изменять URL-адрес, отображаемый в настоящее время в браузере. (Управление историей браузера)
window.history.pushState('', 'title', '/expected-url');
Вы можете использовать эту строку кода в вашем приложении Angular2. Это просто изменит URL, а не состояние приложения. (параметр запроса результатов удаляет из заданного URL)
Я искал ответ так, когда хотел удалить параметр access_token из url. Если вам просто нужно удалить один параметр и сохранить другие параметры.
setTimeout(() => {
let urlWithoutAccessToken = this.router.url.replace(new RegExp('.access_token=' + idToken), '');
this.router.navigateByUrl(urlWithoutAccessToken);
}, 0);
По какой-то причине был необходим setTimeout, navigateByUrl не работал без него.
Я хотел бы предложить этот способ, который совместим со всеми стратегиями маршрутизации Angular X:
this.route.queryParams.subscribe(params => {
let token = params['jwt'];
if (token) {
this.cache.set({t: 't'}, token);
window.location.href = this.router.url.split('?')[0];
}
});