Редактировать API истории браузера с помощью Angular router

Question

У меня есть приложение, в котором мы строим серию временных точек данных с идентификатором 0. Я ссылаюсь на все эти точки по отдельности, набирая их как 01, 02, 03 и т. Д. Мой маршрут - /details/:id. Если пользователь сохраняет одну из этих точек данных, наш API создает реальный идентификатор. Таким образом, процесс выглядит примерно так для пользователя:

Перейти к временному предмету на /details/0123

Сохранить изменения в позиции 0123.

Получить новый элемент в ответе с идентификатором 456.

Angular перенаправляет на /details/456, и пользователь не замечает переход, если он не обращал внимание на URL.

Однако, если пользователь нажмет кнопку «Назад» в своем браузере, он будет перенаправлен на /details/0123.

Вопрос: Могу ли я редактировать историю браузера через Angular router (или другим надежным способом), чтобы предотвратить переход к /details/0123?

Answer 1

Вы можете заменить маршрут /details/0123 на маршрут /details/456 в истории браузера, добавив replaceUrl: true в NavigationExtras.

Пример:

this.router.navigate(['/details/456'], { replaceUrl: true });

Answer 2

Что бы я сделал, это использовал Angular's Location и подписался на popstate. Примерно так:

import {Subscription} from 'rxjs/Subscription';

export class ABC implements OnDestroy {
location: Location;
private subscription: Subscription;

      constructor(location: Location, router: Router) {
        this.subscription = location.subscribe(val => this.router.navigate(/*anywhere*/)
      }
      ngOnDestroy(){
          this.subscription.unsubscribe() //Make sure you do this :)
      }
}

Я думаю, это должно сработать для вас. Дайте мне знать.