javascript - 点击后关闭侧边菜单

Question

我正在构建一个 Angular 应用程序，但在关闭 popstate 菜单时遇到了一些麻烦。当侧边菜单打开并且用户单击其移动设备上的后退按钮时，我希望菜单关闭菜单，因为我使用类似的弹出状态

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

我遇到的问题是后退操作也有效，因此菜单已关闭，但后退操作也会发生。我不能使用history.go(1)，因为它使页面再次加载，我不想要这种行为。

你有什么想法吗？

Answer 1

尝试这个 -

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

代替history.go(1)使用window.history.forward()

window.history.forward()第一页中的这个函数使用浏览器的历史记录并强制它向前导航而不是转到上一页。因此，每次用户单击后退按钮时，都会导致浏览器导航或推动用户前进并显示相同的页面。

Answer 2

根据规范，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 ;
}