浏览器历史记录:跳过抽象状态

5 浏览
0 Comments

浏览器历史记录:跳过抽象状态

浏览器的返回按钮导航按预期工作,但在遇到抽象状态时,它会解析为原始状态(必然是要导航到的抽象状态的子状态)。

在angular-ui-router中,有没有一种方法可以阻止将抽象状态添加到历史记录中?

0
0 Comments

问题原因:在使用AngularJS的ui-router状态机时,点击浏览器的返回按钮无法返回到上一个状态。

解决方法:首先,在应用的运行阶段添加一个事件监听器,监听状态变化的成功事件。当状态变化时,将上一个状态的名称存储在本地存储中。代码如下:

angular
    .module('app')
    .run(appRunFunction);
appRunFunction.$inject = ['$rootScope', 'localstorage'];
function appRunFunction($rootScope, localstorage) {
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParam, fromState, fromParam) {
      localstorage.setValue('lastState', fromState.name);
    });
};

其次,编写一个服务,用于在抽象状态和常规状态之间进行重定向。首先,比较下一个常规状态和上一个状态是否相同,如果相同,则使用window.history.go(-1)返回上一页;如果不相同,则使用$state.go()方法进行重定向,并将新的状态值存储在本地存储中。代码如下:

angular
.module('app.services')
.factory('states', states);
states.$inject = ['$state', 'localstorage'];
function states($state, localstorage) {
  var service = {reloadWithParam: reloadWithParam};
  return service;
  function reloadWithParam(param, value) {
    var fromState = localstorage.getValue('lastState') + '.' + localstorage.getValue('lastPage');
    var toState = $state.current.name + '.' + value;
    var paramObject = {};
    paramObject[param] = value;
    if (fromState === toState) {
      window.history.go(-1);
    } else {
      $state.go($state.current, paramObject, { notify: false});
      localstorage.setValue('lastPage', value);
    }
  }
}

以上就是解决该问题的原因和解决方法。

0