angularjs - Angular - ui-router 获取先前的状态

Question

有没有办法获得当前状态的先前状态？

例如，我想知道在当前状态 B 之前的先前状态是什么（先前的状态本来是状态 A）。

我无法在 ui-router github 文档页面中找到它。

score 151 · Accepted Answer

在移动到新状态之前，我使用 resolve 来保存当前状态数据：

angular.module('MyModule')
.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('mystate', {
            templateUrl: 'mytemplate.html',
            controller: ["PreviousState", function (PreviousState) {
                if (PreviousState.Name == "mystate") {
                    // ...
                }
            }],
            resolve: {
                PreviousState: ["$state", function ($state) {
                    var currentStateData = {
                        Name: $state.current.name,
                        Params: angular.copy($state.params),
                        URL: $state.href($state.current.name, $state.params)
                    };
                    return currentStateData;
                }]
            }
        });
}]);

score 135 · Accepted Answer

ui-router 在转换后不会跟踪先前的状态，但会在状态更改时$stateChangeSuccess广播该事件。$rootScope

您应该能够从该事件中捕获先前from的状态（是您要离开的状态）：

$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
   //assign the "from" parameter to something
});

score 100 · Accepted Answer

为了便于阅读，我将把我的解决方案（基于 stu.salsbury 的 anwser）放在这里。

将此代码添加到应用程序的抽象模板中，以便它在每个页面上运行。

$rootScope.previousState;
$rootScope.currentState;
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
    $rootScope.previousState = from.name;
    $rootScope.currentState = to.name;
    console.log('Previous state:'+$rootScope.previousState)
    console.log('Current state:'+$rootScope.currentState)
});

跟踪 rootScope 中的更改。它非常方便。

score 14 · Accepted Answer

在下面的示例中，我创建了一个decorator（每个应用程序在配置阶段只运行一次）并向$state服务添加了一个额外的属性，因此这种方法不会向其他服务添加全局变量，$rootscope也不需要向其他服务添加任何额外的依赖项$state。

在我的示例中，我需要在用户已经登录时将用户重定向到索引页面，并且在登录后不将他重定向到上一个“受保护”页面时。

我使用的唯一未知服务（对您而言）是authenticationFactory和appSettings：

authenticationFactory只管理用户登录。在这种情况下，我只使用一种方法来识别用户是否登录。
appSettings是常量，只是为了不在任何地方使用字符串。appSettings.states.login并appSettings.states.register包含登录和注册 url 的状态名称。

然后在任何controller/service等中，您需要注入$state服务，您可以像这样访问当前和以前的 url：

当前的：$state.current.name
以前的：$state.previous.route.name

从 Chrome 控制台：

var injector = angular.element(document.body).injector();
var $state = injector.get("$state");
$state.current.name;
$state.previous.route.name;

执行：

_{（我正在使用angular-ui-router v0.2.17和angularjs v1.4.9）}

(function(angular) {
    "use strict";

    function $stateDecorator($delegate, $injector, $rootScope, appSettings) {
        function decorated$State() {
            var $state = $delegate;
            $state.previous = undefined;
            $rootScope.$on("$stateChangeSuccess", function (ev, to, toParams, from, fromParams) {
                $state.previous = { route: from, routeParams: fromParams }
            });

            $rootScope.$on("$stateChangeStart", function (event, toState/*, toParams, fromState, fromParams*/) {
                var authenticationFactory = $injector.get("authenticationFactory");
                if ((toState.name === appSettings.states.login || toState.name === appSettings.states.register) && authenticationFactory.isUserLoggedIn()) {
                    event.preventDefault();
                    $state.go(appSettings.states.index);
                }
            });

            return $state;
        }

        return decorated$State();
    }

    $stateDecorator.$inject = ["$delegate", "$injector", "$rootScope", "appSettings"];

    angular
        .module("app.core")
        .decorator("$state", $stateDecorator);
})(angular);

score 12 · Accepted Answer

在 $stateChangeStart 上向 $state 添加一个名为 {previous} 的新属性

$rootScope.$on( '$stateChangeStart', ( event, to, toParams, from, fromParams ) => {
    // Add {fromParams} to {from}
    from.params = fromParams;

    // Assign {from} to {previous} in $state
    $state.previous = from;
    ...
}

现在任何你需要的地方都可以使用 $state 你将有以前可用

previous:Object
    name:"route name"
    params:Object
        someParam:"someValue"
    resolve:Object
    template:"route template"
    url:"/route path/:someParam"

并像这样使用它：

$state.go( $state.previous.name, $state.previous.params );

score 9 · Accepted Answer

我遇到了同样的问题，并找到了最简单的方法来做到这一点......

//Html
<button type="button" onclick="history.back()">Back</button>

或者

//Html
<button type="button" ng-click="goBack()">Back</button>

//JS
$scope.goBack = function() {
  window.history.back();
};

（如果您希望它更具可测试性，请将 $window 服务注入您的控制器并使用 $window.history.back()）。

score 8 · Accepted Answer

我使用了与 Endy Tjahjono 类似的方法。

我所做的是在进行转换之前保存当前状态的值。让我们看一个例子；想象一下在单击触发转换的任何内容时执行的函数内部：

$state.go( 'state-whatever', { previousState : { name : $state.current.name } }, {} );

这里的关键是 params 对象（将发送到状态的参数映射）->{ previousState : { name : $state.current.name } }

注意：请注意，我只“保存”了 $state 对象的 name 属性，因为这是我保存状态所需的唯一东西。但是我们可以拥有整个状态对象。

然后，声明“whatever”的定义如下：

.state( 'user-edit', {
  url : 'whatever'
  templateUrl : 'whatever',
  controller: 'whateverController as whateverController',
  params : {
    previousState: null,
  }
});

这里，关键点是 params 对象。

params : {
  previousState: null,
}

然后，在那个状态中，我们可以像这样得到之前的状态：

$state.params.previousState.name

score 6 · Accepted Answer

这是 Chris Thielen ui-router-extras 提供的一个非常优雅的解决方案：$previousState

var previous = $previousState.get(); //Gets a reference to the previous state.

previous是一个看起来像这样的对象：{ state: fromState, params: fromParams }其中 fromState 是前一个状态，fromParams 是前一个状态参数。

score 4 · Accepted Answer

好的，我知道我在这里聚会迟到了，但我是 Angular 新手。我正在尝试将其融入此处的John Papa 风格指南。我想让它可重用，所以我在一个块中创建。这是我想出的：

以前的状态提供者

(function () {
'use strict';

angular.module('blocks.previousState')
       .provider('previousState', previousStateProvider);

previousStateProvider.$inject = ['$rootScopeProvider'];

function previousStateProvider($rootScopeProvider) {
    this.$get = PreviousState;

    PreviousState.$inject = ['$rootScope'];

    /* @ngInject */
    function PreviousState($rootScope) {
        $rootScope.previousParms;
        $rootScope.previousState;
        $rootScope.currentState;

        $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
            $rootScope.previousParms = fromParams;
            $rootScope.previousState = from.name;
            $rootScope.currentState = to.name;
        });
    }
}
})();

核心模块

(function () {
'use strict';

angular.module('myApp.Core', [
    // Angular modules 
    'ngMessages',
    'ngResource',

    // Custom modules 
    'blocks.previousState',
    'blocks.router'

    // 3rd Party Modules
]);
})();

核心配置

(function () {
'use strict';

var core = angular.module('myApp.Core');

core.run(appRun);

function appRun(previousState) {
    // do nothing. just instantiating the state handler
}
})();

对此代码的任何批评只会对我有所帮助，所以请让我知道我可以在哪里改进此代码。

score 2 · Accepted Answer

如果你只需要这个功能并且想在多个控制器中使用它，这是一个跟踪路由历史的简单服务：

  (function () {
  'use strict';

  angular
    .module('core')
    .factory('RouterTracker', RouterTracker);

  function RouterTracker($rootScope) {

    var routeHistory = [];
    var service = {
      getRouteHistory: getRouteHistory
    };

    $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
      routeHistory.push({route: from, routeParams: fromParams});
    });

    function getRouteHistory() {
      return routeHistory;
    }

    return service;
  }
})();

其中 .module('core') 中的 'core' 将是您的应用程序/模块的名称。要求该服务依赖于您的控制器，然后在您的控制器中您可以执行以下操作：$scope.routeHistory = RouterTracker.getRouteHistory()

score 1 · Accepted Answer

我在$rootScope中跟踪以前的状态，所以每当需要时，我都会调用下面的代码行。

$state.go($rootScope.previousState);

在App.js 中：

$rootScope.$on('$stateChangeSuccess', function(event, to, toParams, from, fromParams) {
  $rootScope.previousState = from.name;
});

score 0 · Accepted Answer

一个非常简单的解决方案就是编辑 $state.current.name 字符串并删除包括最后一个 '.' 和之后的所有内容。- 你得到父州的名字。如果您在状态之间跳转很多，这将不起作用，因为它只是解析当前路径。但是，如果您的状态与您实际所在的位置相对应，那么这是可行的。

var previousState = $state.current.name.substring(0, $state.current.name.lastIndexOf('.'))
$state.go(previousState)

score 0 · Accepted Answer

对于 UI-Router(>=1.0)，StateChange 事件已被弃用。如需完整的迁移指南，请单击此处

要在 UI-Router 1.0+ 中获取当前状态的先前状态：

app.run(function ($transitions) {
    $transitions.onSuccess({}, function (trans) {
         // previous state and paramaters
         var previousState = trans.from().name;
         var previousStateParameters = trans.params('from');
    });
});

score -2 · Accepted Answer

您可以通过以下方式返回状态：

$state.go($state.$current.parent.self.name, $state.params);

一个例子：

(function() {
    'use strict'

    angular.module('app')
        .run(Run);

    /* @ngInject */
    function Run($rootScope, $state) {

        $rootScope.back = function() {
            $state.go($state.$current.parent.self.name, $state.params);
        };

    };

})();

angularjs - Angular - ui-router 获取先前的状态

14 回答 14

Related

Reference