angularjs ui-router stateparams 在页面刷新时不可见丢失 [英] angularjs ui-router stateparams invisible loses on page refresh

问题描述

我正在做一个 Angular 项目，我在其中设置了如下所示的状态.

Im working on a angular project, where i have set my states as shown below.

$stateProvider.state('UserPanel', {
    url: '/user',
    params: { userId: null },
    views: {
        'content@': {
            templateUrl: '/AngViews/UserPanel/UserPanel.UserDetails.html'
        }
    }
});

当我导航到视图时，它带有参数，所以这部分工作正常.

when i navigate to the view, it takes the params with it, so this part is working.

但是当我更新页面时，它会丢失参数.我知道，如果我在 url 变量中定义了参数，它将起作用.但我想让它不可见.

But when i update the page, it's loses the params. I know that if i defined the params in the url variable it will work. but i want to make it invisible.

我发现类似 这个，但不知道它是否能解决我的问题.如果可以，将无法正常工作.谁能解释一下如何做到这一点?

I have found something like this, but don't know if it's gonna fix my problem. can't get it working if it does. anyone who can explain how this can be done?

感谢您的宝贵时间

推荐答案

我遇到了同样的问题，用这段代码解决了

I faced the same problem and solved it with this code

angular.module('app').run(function($rootScope, $state, localStorageService) {

  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
   var prefix = "stateParams.";
   var fromStateName = prefix + fromState.name;
   var toStateName = prefix + toState.name;
   var f = true;
   for (var k in toState.params) {
     f = f && (JSON.stringify(toParams[k]) == JSON.stringify(toState.params[k]));
   }
   if (f && localStorageService.get(toStateName) != null) {
     event.preventDefault();
     var savedToParams = localStorageService.get(toStateName); //retrieving toParams from local storage
     localStorageService.remove(toStateName);
     for (var k in toState.params) {
       toParams[k] = savedToParams[k]; //update only the params {} not url params
     }
     $state.transitionTo(toState,toParams);
   } else {
     var toSave = {};
     for (var k in toState.params) {
       toSave[k] = toParams[k]; //save only the params {} not url params
     }
     localStorageService.set(toStateName,toSave);
   }
  });

});

要点

我尝试使用 localStorageService 来缓存"状态转换之间的参数.

I try to use the localStorageService to 'cache' the params between state transitions.

当从状态 A 转到状态 B 时，我删除了以前为 A 存储的参数.

when going from state A to state B , I remove the params previously stored for A.

然后我检查发送给 B 的参数是否与 B 的状态定义中的参数匹配，如果它们匹配，我从 localStorage 加载参数，因为这意味着用户点击了刷新和参数已重置.

I then check to see if the params that are being sent to B match the params in the state definition of B, and if they do match I load the params from the localStorage , because this means that the user has hit refresh and the params got reset.

我在几个案例中测试了这段代码，但仍未完全测试.

I tested this code on a couple of cases , but it is still not fully tested.

这篇关于angularjs ui-router stateparams 在页面刷新时不可见丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！