AngularJS UI-Router StateParams在页面刷新时丢失的隐形问题

Question

AngularJS UI-Router StateParams在页面刷新时丢失的隐形问题

angularjsangular-ui-routerangular-routing

6

我正在进行一个 Angular 项目，其中我已经按照下面的方式设置了我的状态。

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

当我进入这个视图时，它会带着参数，所以这部分是有效的。

但是当我更新页面时，就会丢失这些参数。我知道如果在URL变量中定义这些参数，它将起作用。但我想让它隐形。

我找到了类似这样的内容，但不知道它是否能解决我的问题。如果可以解决，我也不知道如何操作。请问有谁能解释一下如何实现吗？

感谢您抽出时间。

- DaCh

2

当您刷新应用程序时，实际上整个应用程序将被重新启动。因此，先前的数据不会存储在应用程序中。唯一不会刷新的部分是URL。因此，如果您将状态参数放在URL中，则可以正常工作，否则您需要使用localstorage或类似的东西来存储数据。 - Indranil Mondal

@DaCh：这个问题解决了吗？我也遇到了同样的问题... - ShankarGuru

@ShankarGuru 不，我没法做到，所以我就使用了参数，像这样：

url: '^/User/:userId',
params: { userId: null },

这样就可以实现了，但是查询字符串/路由参数是可见的。 - DaCh

@DaCh：userID是字符串还是对象？我们能在URL中传递对象吗... - ShankarGuru

1

@shankarGuru 的 userid 在这种情况下是一个字符串。我不知道你是否可以将一个对象传递给 JSON 字符串并将其用作参数。或者你可以手动将对象转换为参数。 - DaCh

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ahmed Fahmy · Accepted Answer

我也遇到了同样的问题，并用以下代码解决了它。

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 的参数是否与 B 状态定义中的参数匹配，如果匹配，则从 localStorage 加载参数，因为这意味着用户已经刷新并重置了参数。

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