angularjs ui-router stateparams页面刷新时看不见丢失

Question

我正在进行一个角度项目,我已经设置了我的状态,如下所示.

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

当我导航到视图时,它会使用它的参数,所以这部分正在工作.

但是当我更新页面时,它失去了参数.我知道如果我在url变量中定义了params 它会起作用.但我想让它隐形.

我发现像这样,但不知道是否要去解决我的问题.如果确实如此,它就无法运作.有谁可以解释如何做到这一点？

谢谢你的时间

Answer 1

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

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“缓存”状态转换之间的参数。

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

然后，我检查发送到 B 的参数是否与 B 的状态定义中的参数匹配，如果匹配，我从 localStorage 加载参数，因为这意味着用户已点击刷新并且参数得到重置。

我在几个案例中测试了这段代码，但它仍然没有经过完全测试。