Question

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

我使用angular 1.3.17和$ stateProvider在状态之间进行路由。我将所有数据存储在$ rootScope中，每当用户点击刷新时，$ rootScope就会被销毁，应用程序必须重新加载

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

Answer 1

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

Answer 2

没有任何有效的方法可以阻止用户重新加载页面。解决不会从$rootScope销毁的数据的最佳方法是将所有数据存储在localStorage中，每次再次加载应用时，$rootScope所需的值应为从localStorage分配。

所以我的观点是在localStorage中存储essensial值，如

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

每次重新加载应用时，请在应用的ngOnInit（）中保留一个函数，该函数会将所需的值从本地存储分配到$rootScope变量，如

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

希望它有所帮助！

Answer 3

//应用组件的构造函数中的示例

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

Answer 4

出于好的理由，无法阻止用户重新加载/离开页面。但是在重新加载之前会有两个事件被触发，你可以让浏览器要求用户留下来。

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上保存很多东西并不是一种优雅的方式，而你正在失去角度封装的好处。如果你想制作一些（！）信息＆＃34; reload-proof＆＃34;我建议将它们保存在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

祝你好运：）

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

4 个答案: