Question

我在一个角度项目上工作，我已经设置了我的状态，如下所示。

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

当我导航到视图时，它会使用params，因此这部分正在工作。

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

我找到了类似this的内容，但不知道它是否能解决我的问题。如果确实如此，它就无法运作。有谁可以解释如何做到这一点？

感谢您的时间

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);
   }
  });

});

Gist

我尝试使用localStorageService来“缓存”状态转换之间的参数。

当从状态A进入状态B时，我删除先前为A存储的参数。

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

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

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

1 个答案: