Angular: отключить модальный режим при нажатии кнопки «Назад» в браузере и отменить навигацию

Question

Я пытаюсь закрыть модальное окно в полноэкранном режиме, когда кнопка возврата браузера нажата с этим кодом:

class MyModalComponent {
  constructor(private _location: LocationStrategy) { }

  public ngOnInit(): void {
    this._location.pushState(this.url, this.title, this.url, '');
  }

  @HostListener('window:popstate', ['$event'])
  public onPopState(event: PopStateEvent) {
      this.modal.dismiss();
      event.preventDefault();
      event.stopPropagation();
      event.cancelBubble = true;
  }
}

Когда кнопка возврата нажата, вызывается onPopState, а режимотклонен, но также Angular Router обнаруживает изменение URL и начинает переход к предыдущему состоянию. Есть ли способ отменить навигацию или запретить прослушиванию изменений URL-адреса Angular Router при открытом модале?

Answer 1

Одним из грязных решений может быть использование onSameUrlNavigation свойства маршрутизатора, установленного на 'ignore', и добавление текущего URL-адреса в историю навигации, чтобы кнопка возврата не вызывала навигацию маршрутизатора:

class MyModalComponent {
  private _prevOnSameUrlNavigation; 

  constructor(private _location: LocationStrategy, private _router: Router) {

  }

  public ngOnInit(): void {
    this._prevOnSameUrlNavigation = this._router.onSameUrlNavigation;
    this._router.onSameUrlNavigation = 'ignore';
    this._location.pushState("Modal state", "Modal title", this._router.url, '');
  }

  @HostListener('window:popstate', ['$event'])
  public onPopState(event: PopStateEvent) {
      this.modal.dismiss();
      event.preventDefault();
      event.stopPropagation();
      event.cancelBubble = true;
  }

  public ngOnDestroy() {
      this._router.onSameUrlNavigation = this._prevOnSameUrlNavigation;
  }
}