管理UI路由器状态历史记录

在我的单页应用程序中，我需要保留状态历史记录，以便在状态之间来回导航。我有我自己的前进和后退按钮，我在我的页面上使用，而不是通过浏览器的按钮。管理UI路由器状态历史记录

这是下面的代码，我使用了我创建的服务来存储数组中的状态。

$rootScope.$on('$stateChangeStart', function (event, toState, toParams) { 
    StateMgmtService.add(toState, toParams); 
});

在服务上，我有话要以下的效果：

var history = []; 

    return { 
     previous: function() { 
      if (history && history.length > 0) { 
       return history[history.length - 1]; 
      } 
     }, 
     add: function (state, params) { 
      var historyItem = { 
       state: state, 
       parameters: params 
      }; 

      history.push(historyItem); 
     } 
    };

的问题是，任何时候我回去到以前的状态，在stateChangeStart被激发，基本上污染我的历史。请看下面的例子：

从状态A到B的开始 - B被添加到历史
B到C - ç被添加
C返回到B - B被再次添加

这导致从b到c到b到c的无限循环...因此，我基本上不需要允许先前的项目被添加到历史中或以某种方式知道它将回到历史中，而是stateChangeStart不允许有任何区别。

帮助！

来源

2016-05-17 whatsTheDiff

在服务中，我最终添加了一个goBack方法，当想要遍历历史记录时会调用它。该功能设置一个标志，指示在历史中移回。然后，当stateChangeStart事件被触发并添加到数组时，服务知道它是一个不需要添加的项目，重置该标志并返回。到目前为止，它运作良好。

来源

2016-05-20 19:43:04 whatsTheDiff

你可以通过验证历史（长度-2）与当前状态相等来解决它。一些像这样的代码，在服务：

add: function(state, params) { 
    var isBackState = function (currentState, listState) { 
    var listStateLength = listState.length; 
    if (listState[listStateLength -2].state === currentState) { 
     return true; 
    } 

    return false; 
    }; 

    if (history.length > 1 && isBackState(state, history) { 
    return; 
    } 

    var historyItem = { 
    state: state, 
    parameters: params 
    }; 

    history.push(historyItem); 
}

，如果你只希望historyItem推到历史如果先前的状态与当前状态不相等，那么你可以在$ stateChangeStart功能范围添加验证。

$rootScope.on('$stateChangeStart', function (event, toState, toParams, fromState) { 
    if (toState === fromState) { 
    return; 
    } 
    .... 
}

来源

2016-05-18 01:59:27 mtamma

在我目前的应用程序中，只需使用不同的参数就可以处于相同的状态。例如， /page/2 /page/3 所以'page'是状态，2和3是参数。所以它必须比较状态和参数，这似乎是不必要的。 – whatsTheDiff

如果您只希望historyItem推入历史记录，如果先前状态与当前状态不相等，则可以在$ stateChangeStart函数作用域上添加验证。 $ rootScope.on（'$ stateChangeStart'，function（event，toState，toParams，fromState）{ if（toState === fromState）{ return; } – mtamma

管理UI路由器状态历史记录

回答

相关问题