typescript - 在 Angular 應用中，Chrome 瀏覽器的返回按鈕不會刷新頁面

我使用上述代碼嘗試在按下返回按鈕時強制刷新，但它只在 Chrome 上不刷新頁面。我無法弄清代碼出了什麼問題。有時它在本地有效，但在生產環境中從不生效。

@HostListener('window:beforeunload', ['$event'])   onPopStateBack() {     
   console.log("Back Button detected!");     
   window.location.reload();  
}   

@HostListener('window:popstate', ['$event'])   onPopState(event: any) {     
   console.log("Back Button detected!");     
   window.location.reload();   
}

答案＃1

我會建議使用 Angular 的 Router 服務。在我看來，這似乎是更『Angular』的做法。在你的建構函數中注入 Router 服務，然後訂閱它的事件。屬性 navigationTrigger 用於識別觸發導航的事件，在你的情況下，我們正在尋找返回按鈕，所以我們只需要 'popstart'。

constructor(private router: Router){}

ngOnInit(){
   this.refreshOnBackButtonClick();
}

refreshOnBackButtonClick(): void {
   this.router.events.subscribe((event: NavigationStart) => {
     if (event.navigationTrigger === 'popstate') {
       console.log('popstart');
       window.location.reload();
     }
   });
}

注意：這個訂閱也會在瀏覽器中按下前進按鈕時觸發事件。所以如果你只想在使用者點擊返回按鈕時刷新，就必須判斷是觸發了哪個事件。附註：事件對象中還有其他屬性可以幫助你判斷是否需要刷新。