Удалить параметр из queryParams angular 2

Я перехожу к определенной странице в своем приложении с параметром запроса. После того, как я получу параметр из URL-адреса, я хочу его удалить, в идеале я бы это сделал:

let userToken: string;
    this.sub = this.router
      .routerState
      .queryParams
      .subscribe(params => {
        userToken = params['token'];
        params['token'].remove();
      });

Но, очевидно, функция удаления не существует. Есть ли у кого-то альтернатива?

Ответы

Ответ 1

На всякий случай, если люди найдут эту ветку (как и я). У меня есть сценарий, который я получаю токен JWT в строке запроса (/login?jwt=token). Мне нужно было получить этот токен (и сохранить его и т.д.), Но затем нужно было убедиться, что он благополучно удален из URL. Перезагрузка маршрута входа в систему (с помощью this.router.navigate(['login']) работает в principe, однако пользователь может затем использовать кнопку возврата браузера, в основном воспроизводя логин токена.

Я решил это, не используя навигацию, а добавив сервис "Местоположение" (из @angular/common). Этот сервис имеет метод replaceState, который полностью удаляет токен из истории, а также из URL.

 this.location.replaceState('login')

Надеюсь, что это помогает кому-то.

Ответ 2

Вы можете назначить null конкретному запросуParam:

this.router.navigate([], {queryParams: {page: null}, queryParamsHandling: 'merge'});

Ответ 3

ОБНОВЛЕНИЕ Нет необходимости добавлять queryParams в rc6 больше.

Не уверен, что это так:

После маршрутизации к компоненту с параметрами запроса все остальные URL-адреса этого компонента автоматически содержат параметры запроса. Каждый раз, когда вы переходите к другому URL-адресу, параметры запроса остаются.

Если это так, одно из возможных решений может быть в параметрах запроса в теге html

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

Если нет, я также заинтересован в ответе: P

Ответ 4

Императивный метод, но очиститель:

this.router.navigate(['.'], { relativeTo: this.route, queryParams: {} });

Ответ 5

Я использую метод маршрутизатора navigateByUrl.

Альтернативный документ: Angular документация

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

Мое использование у меня есть компонент, который служит в качестве внешнего обратного вызова для событий auth, таких как сброс пароля и проверка электронной почты. По завершении операции любое действие навигации должно происходить через router.navigateByUrl(path)

Ответ 6

HTML5 включает API history.pushState, который позволяет добавлять записи истории и изменять URL-адрес, отображаемый в настоящее время в браузере. (Управление историей браузера)

window.history.pushState('', 'title', '/expected-url');

Вы можете использовать эту строку кода в вашем приложении Angular2. Это просто изменит URL, а не состояние приложения. (параметр запроса результатов удаляет из заданного URL)

Ответ 7

Я искал ответ так, когда хотел удалить параметр access_token из url. Если вам просто нужно удалить один параметр и сохранить другие параметры.

setTimeout(() => {
  let urlWithoutAccessToken = this.router.url.replace(new RegExp('.access_token=' + idToken), '');
  this.router.navigateByUrl(urlWithoutAccessToken);
}, 0);

По какой-то причине был необходим setTimeout, navigateByUrl не работал без него.

Ответ 8

Я хотел бы предложить этот способ, который совместим со всеми стратегиями маршрутизации 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];
        }
    });