javascript - 管理 ui-router 状态历史

Question

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

这是我的以下代码，它使用我创建的服务将状态存储在数组中。

$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 被添加
• c 返回 b - b 再次被添加

这导致从 b 到 c 再到 b 再到 c 的无休止循环...所以我基本上需要不允许将先前的项目添加到历史记录中或者以某种方式知道它会回到历史记录中，但是stateChangeStart 不允许这样的任何区分。

帮助!

Answer 1

在服务中，我最后添加了一个 goBack 方法，当想要遍历历史时调用该方法。此函数设置一个标志，指示在历史中向后移动。然后当 stateChangeStart 事件被触发并添加到数组中时，服务知道它是一个不需要添加的项目，重置标志，并从中返回。到目前为止效果很好。