Question

我的Angular应用程序中有一个使用Angular UI路由器的要求，从一个屏幕（URL）返回到之前访问过的屏幕（URL）。有几个屏幕（URL）可以访问目标页面。它不像简单的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时，我可以返回我来自的页面（无论是哪个页面）。

这样就行了，直到用户在目标页面上刷新页面为止。

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

除了使用cookies或本地存储（yuck）之外，我还在努力想出一个很好的解决方案。

Answer 1

使用$locationProvider支持深层链接。文档相当稀疏，但它允许在临时状态之间切换，以及链接回临时状态的页面刷新。如果您想使用HTML5历史记录模式，可以使用$locationProvider.html5Mode(true)

Answer 2

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

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

(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中屏幕之间的堆栈导航。这可以防止导航时出现不良行为。

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

Hisotry.back() - ＆gt;返回上一个屏幕（并从堆栈中删除正常屏幕）

History.backTo(route) - ＆gt;回到特定路线并清理历史直到该路线**

Hisotry.clear() - ＆gt;清除所有历史。

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

示例：

History.back({productId:1}) - ＆gt;回到上一个屏幕，其中包含所有原始参数和参数productId = 1; 此参数可以使用$location.search()

重要提示：此模块使用其他历史记录对象，不会影响浏览器历史记录

History API / Angular：如何返回预定的URL

3 个答案: