Question

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

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

林先生的问题是后退动作也起作用，因此菜单已关闭但后退动作也发生了。我不能使用history.go(1)，因为它会使页面再次加载，并且我不希望这种行为。

您有什么想法吗？

Answer 1

根据the specs，无法取消流行状态。但是，您可以尝试执行此操作

@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;
          }
      });

使用 window.history.forward（）

代替 history.go（1）

window.history.forward（）：第一页中的此功能使用浏览器的历史记录，并强制其向前浏览而不是转到上一页。因此，每次用户单击“后退”按钮，都会导致浏览器向前导航或推动用户并显示同一页面。

关闭侧面菜单后单击

2 个答案: