Закрыть боковое меню по щелчку сзади

Question

Я создаю приложение Angular и испытываю проблемы с закрытием меню в popstate. когда боковое меню открыто, и пользователь нажимает кнопку "Назад" на своем мобильном устройстве, я хочу, чтобы меню закрывало меню, для этого я использую pop-статус, подобный этому

@HostListener('window:popstate', ['$event'])
  onPopState(event) {
    if (this.isMenuOpened) {
      this.toggleSidebar();
    }
      return ;
  }

У меня проблема в том, что обратное действие также работает, поэтому меню закрывается, но также происходит обратное действие. я не могу использовать history.go(1) потому что это заставляет страницу загружаться снова, и я не хочу такого поведения.

у тебя были идеи?

Answer 1

Popstate не подлежит отмене согласно спецификации. Тем не менее, вы можете попробовать сделать это

@HostListener('window:popstate', ['$event'])
onPopState(event) {
    if (this.isMenuOpened) {
        event.preventDefault();
        history.go(1); // re-changes the url to what it should be
        this.toggleSidebar();
    }
    return ;
}

Answer 2

Попробуй это -

 $(window).on( "popstate", function(event){
          if( !event.originalEvent.state ){
          history.pushState( "nohb", null, "" );
          return;
          }
      });

Вместо history.go(1) используйте window.history.forward ()

window.history.forward () эта функция на первой странице использует историю браузера и заставляет ее перемещаться вперед, а не переходить на предыдущую страницу. Следовательно, каждый раз, когда пользователь нажимает кнопку "Назад", браузер перемещается или перемещает пользователя вперед и отображает ту же страницу.