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

发布时间：2020-12-17 07:11:42 所属栏目：安全来源：网络整理

导读：我正在进行一个角度项目,我已经设置了我的状态,如下所示. $stateProvider.state('UserPanel',{ url: '/user',params: { userId: null },views: { 'content@': { templateUrl: '/AngViews/UserPanel/UserPanel.UserDetails.html' } }}); 当我导航到视图时,它

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

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

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

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

我找到了像this这样的东西,但不知道它是否能解决我的问题.如果确实如此,它就无法运作.有谁可以解释如何做到这一点？

谢谢你的时间

解决方法

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

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得到了重启.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!