历史API/Angular：如何回到预定的URL

Question

我在使用 Angular UI 路由器的 Angular 应用程序中有一项要求，即从一个屏幕 (URL) 返回到之前访问过的屏幕(URL)。有几个屏幕 (URLs) 可以访问目标页面。虽然它不像简单的 history.back() 操作那么简单` 因为我有几个可以以任何顺序和任何数量出现的中间状态。为了解决这个问题，我在 Angular $location 服务周围实现了一个包装器，如下所示：

(function () {
    'use strict';
    angular
        .module('myApp')
        .factory('locn', ['$location', '$state',
            function ($location, $state) {
                var states = [];
                return {
                    go: function (url) {
                        $location.path(url);
                    },
                    pushandgo: function (state, params) {
                        states.push({ name: $state.current.name, params: $state.params });
                        $state.go(state, params);
                    },
                    push: function (url) {
                        states.push(url);
                    },
                    pop: function () {
                        var state = states.pop();
                        $state.go(state.name, state.params);
                    },
                    search: function (searchDict) {
                        $location.search(searchDict);
                    }
                };
            }]);

})();

如您所见，这将状态存储在 locn 服务的 javascript 局部变量中。我可以调用 pushandgo，这意味着当我随后调用 pop 时，我可以 return 到我来自的页面（不管那是什么页面）。

这工作正常，直到用户在目标页面上刷新页面。

重新创建状态数组，丢失所有先前推送的状态。

除了使用 cookie 或本地存储（糟糕）之外，我正在努力想出一个好的解决方案。

Answer 1

使用$locationProvider to support deep linking. The documentation is rather sparse, but it allows switching between interim states, and page-refreshes that link back to an interim state. If you want to utilize HTML5 history mode, you can use $locationProvider.html5Mode(true)

Answer 2

我找到了使用 cookie 或本地存储的更可口的解决方案 - 会话存储！

我的 locn 服务现在看起来像这样。

(function () {
    'use strict';
    angular
        .module('csApp')
        .factory('locn', ['$location', '$state', '$window',
            function ($location, $state, $window) {
                return {
                    go: function (url) {
                        $location.path(url);
                    },
                    pushandgo: function (state, params) {
                        $window.sessionStorage.setItem("prev", JSON.stringify({ name: $state.current.name, params: $state.params }));
                        $state.go(state, params);
                    },
                    pop: function () {
                        var state = JSON.parse($window.sessionStorage.getItem("prev"));
                        $window.sessionStorage.removeItem("prev");
                        $state.go(state.name, state.params);
                    },
                    search: function (searchDict) {
                        $location.search(searchDict);
                    }
                };
            }]);

})();

Answer 3

我知道这是一个老问题，但我已经为这个问题和其他历史问题开发了一个简单的解决方案：

https://github.com/adamantioengcomp/ada-hsitory

此方法堆栈状态变化，其url参数，因此它模拟了Android中屏幕之间的堆栈导航。这可以防止导航时出现不良行为。

通过安装此模块并注入“历史记录”服务，有 3 个有用的方法：

History.back() -> 返回上一屏幕（并从堆栈中删除实际屏幕）

History.backTo(route) -> 返回到特定路线并清除历史记录直到该路线（见下面的注释）

History.clear() -> 清除所有历史记录。

History.back() 和 History.backTo() 方法都可以接收一个对象作为参数，并将参数放入 URL.

示例：

History.back({productId:1}) -> 返回上一屏幕及其所有原始参数加上参数 productId = 1; 这个参数可以用$location.search()

取

注意：该模块使用了另一个历史对象，不影响浏览器历史

历史API/Angular：如何回到预定的URL

History API/Angular: how to go back to predetermined URL

javascript

angularjs

browser-history

html5-history