AngularJS $ location replace()也替换了上一个历史条目

Jul*_*ius 5 angularjs html5-history

在我的AngularJS应用程序中,我只需保存浏览器历史记录中的状态更改.这就是为什么当我更改$ location的参数时,我正在使用replace()方法.

例如,当我访问/ page1时,它将保存在历史记录中.使用replace()自动添加'center'参数,因此它不会添加新的历史记录条目:

$location.search('centre', hash).replace();
Run Code Online (Sandbox Code Playgroud)

每次移动地图时,"中心"都会发生变化.

当我转到/ page2时,会创建历史记录中的新条目.当我移动地图时,"中心"会发生变化.

问题是,当我按下BACK按钮时,我将转到/ page1,但我需要保持'center'与之前相同,但它会更改为与/ page1的历史记录条目一起保存的内容.

我该如何解决这个问题?

我试着添加:

$window.history.replaceState({}, '', $location.absUrl());
Run Code Online (Sandbox Code Playgroud)

我做replace()后,但没有工作.

Jul*_*ius 0

这就是我解决这个问题的方法。

首先,我们需要将搜索结果保存为先前和当前:

$rootScope.$on('$locationChangeStart', function (event, toURL, fromURL) {
    if ($rootScope.search.current) {
        $rootScope.search.previous = $rootScope.search.current;
    }

    $rootScope.search.current = $location.search();
});
Run Code Online (Sandbox Code Playgroud)

然后我们需要始终更改我们当前所在的实际位置。

$rootScope.$on('$locationChangeSuccess', function (event, toURL, fromURL) {
    $rootScope.actualLocation = $location.path();
});
Run Code Online (Sandbox Code Playgroud)

如果按下前进按钮的后退,则必须在 URL 中更改中心(使用以前的搜索结果),而不推送新的历史记录条目。

$rootScope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
    if ($rootScope.actualLocation === newLocation) {
        $location.search('center', $rootScope.search.previous.center).replace();
    }
});
Run Code Online (Sandbox Code Playgroud)