如何使用 Angular 檢測瀏覽器刷新

Question

在我當前的應用程序中，每當用戶單擊瀏覽器上的刷新按鈕時，應用程序就會再次加載並將用戶重定向到主頁。 我需要保持在同一頁面上（無需再次加載應用程序）。 我已經瀏覽了 StackOverflow 中的許多鏈接，但我找不到我正在尋找的確切解決方案。 任何幫助將不勝感激。

我正在使用 angular 1.3.17 和 $stateProvider 在狀態之間進行路由。 我將所有數據存儲在 $rootScope 中，每當用戶單擊刷新時，$rootScope 就會被破壞，必須再次重新加載應用程序

我的目標是阻止應用加載並僅加載用戶當前使用的頁面。

Answer 1

如果可以通過root檢測到恢復顯示的頁面和數據，我認為這是正確的解決方案。 否則你可以尋找一個插件來存儲本地存儲中所需的數據。 在加載頁面時，您可以使用存儲的數據將用戶重定向到提供的頁面

Answer 2

出於充分的理由，沒有辦法阻止用戶重新加載/離開頁面。 但是在重新加載之前將觸發兩個事件，您可以讓瀏覽器要求用戶停留。

angular.element($window).on('beforeunload', ()=>{
   var askUserToLeave = true /*your condition here*/; 
   if (askUserToLeave) {
      return '';/*let this empty, cause newer browser dont care about the string input*/
   }
});

如果用戶確認頁面離開，您仍然可以在重新加載之前做最后的事情

angular.element($window).on('unload', ()=>{
   //your code here
   //e.g. save the $rootscope to localstorage/sessionstorage
});

如前所述，您可以對路由更改做出反應（並防止！）（當用戶單擊頁面上的鏈接按鈕時觸發，但當用戶通過瀏覽器重新加載時它無濟於事）。

$rootScope.$on('$routeChangeStart', function (event, next, current) {
   if (true/*your condition here*/) {
      event.preventDefaults()
   }
});

最后，在 $rootScope 上保存很多東西並不是一種優雅的方式，而且您正在失去 angular 封裝的好處。 如果您想制作一些（！）信息“防重新加載”，我建議將它們保存在 sessionStorage（在選項卡關閉時被刪除）或 localStorage（持續存在，它只會在您清理瀏覽器緩存時被刪除或在您的代碼）。 我強烈建議使用 ngStorage 來處理 sessionStorage/localStorage，就像這樣：

$localStorage.foo = 'bar';
$sessionStorage.bar = 'foo';
//reload
console.log($localStorage.foo);//outputs: bar
console.log($sessionStorage.bar);//outputs: foo

https://github.com/gsklee/ngStorage

你可以這樣安裝： npm i -S ngStorage

祝你好運:)

Answer 3

沒有任何有效的方法可以阻止用戶重新加載頁面。 處理$rootScope不被銷毀的數據的最佳方法是將所有數據存儲在localStorage ，並且每次再次加載應用程序時， $rootScope所需的值都應該從localStorage分配。

所以我的觀點是在 localStorage 中存儲必要的值，例如

let neededData = JSON.parse(localStorage.getItem('yourData'));

每次重新加載應用程序時，在應用程序的 ngOnInit() 中保留一個函數，該函數會將本地存儲中的所需值分配給$rootScope變量，例如

this.$rootScope.data = localStorage.getItem('yourData');

希望有幫助！

Answer 4

// App 組件的構造函數中的示例

constructor(private router: Router) {
  this.subscription = router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      browserRefresh = !router.navigated;
    }
  });
}