關閉側面菜單后單擊

Question

我正在構建一個Angular應用程序，並在popstate上關閉菜單遇到了一些麻煩。 當側面菜單打開並且用戶單擊其移動設備上的后退按鈕時，我希望菜單關閉菜單，為此，我使用諸如此類的彈出狀態

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

Im的問題是后退動作也起作用，因此菜單關閉，但后退動作也發生。 我不能使用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（）此函數在第一頁中使用瀏覽器的歷史記錄，並強制其向前瀏覽而不是轉到上一頁。 因此，每次用戶單擊“后退”按鈕，都會導致瀏覽器向前導航或推動用戶並顯示同一頁面。