历史API/Angular:如何返回到预先确定的URL

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

本文关键字：URL 返回 Angular API 何返回 历史      更新时间：2024-02-01

我在我的Angular应用程序中有一个要求，它使用Angular UI路由器，从一个屏幕（URL）返回到以前访问过的页面（URL）。有几个屏幕（URL）可以访问目标页面。不过，它不像简单的history.back()操作那样直接，因为我有几个临时状态，可以以任何顺序和任何数量出现。为了解决这个问题，我实现了Angular$定位服务的包装器，如下所示：

(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时，我可以返回到我来自的页面（无论是哪个页面）。

在用户位于目标页面时刷新页面之前，此操作正常。

状态数组被重新创建，失去了之前推送的所有状态。

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

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

我发现了一个更适合使用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);
                    }
                };
            }]);
})();

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

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

这个方法通过url参数来堆叠状态变化，因此它模拟了Android中屏幕之间的Stack导航。这样可以防止导航时出现不希望出现的行为。

通过安装该模块并注入服务"；"历史"；，有三种有用的方法：

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

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

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

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

示例：

History.back({productId:1})->返回到上一个屏幕，显示其所有原始参数加上参数productId = 1;此参数可与$location.search() 一起使用

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

相关文章：