如何使用 Angular 检测浏览器刷新

NK06
2017-10-26  
9508  
    
4  

在我当前的应用程序中，每当用户单击浏览器上的刷新按钮时，应用程序都会再次加载并将用户重定向到主页。我需要保持在同一页面上（无需再次加载应用程序）。我已经浏览了 StackOverflow 中的许多链接，但我找不到我正在寻找的确切解决方案。任何帮助将不胜感激。

我正在使用 angular 1.3.17 和 $stateProvider 在状态之间进行路由。我将所有数据存储在 $rootScope 中，每当用户单击刷新时，$rootScope 都会被破坏并且必须再次重新加载应用程序

我的目标是防止应用程序加载并仅加载用户当前正在使用的页面。

javascript ,  angularjs ,  angular-ui-router
stack overflow How to detect Browser Refresh using Angular
原文答案

答案:

作者头像
jaheraho
2017-11-29    1      原文

有充分的理由没有办法阻止用户重新加载/离开页面。但是在重新加载之前会触发两个事件，您可以让浏览器要求用户留下来。

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 上保存很多东西并不是一种优雅的方式，而且您正在失去角度封装的好处。如果您想让某些（！）信息“防重新加载”，我建议将它们保存在 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

祝你好运:)

作者头像
Mahmoud
2017-10-26    0      原文

如果可以通过root检测到要恢复和显示的页面和数据，我认为这是正确的解决方案。否则，您可以寻找一个插件来存储本地存储中所需的数据。在加载页面时，您可以使用存储的数据将用户重定向到提供的页面

作者头像
BlizZard
2018-06-05    0      原文

没有任何有效的方法可以阻止用户重新加载页面。处理不被 $rootScope 销毁的数据的最佳方法是将所有数据存储在 localStorage 中，并且每次再次加载应用程序时，应从 $rootScope 中分配所需的值JXM=}。

所以我的观点是将基本值存储在 localStorage 中，例如

localStorage

并且每次重新加载应用程序时，在应用程序的 ngOnInit() 中保留一个函数，该函数会将所需值从本地存储分配给 ```
let neededData = JSON.parse(localStorage.getItem('yourData'));



 `$rootScope` 

希望能帮助到你！
作者头像
tarek noaman
2019-07-30    0      原文

// App 组件的构造函数中的示例

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

相关问题

标签