在“onEnter”挂钩中获取状态名称

我正在构建一个应用程序，我想在用户进入和离开路线时切换服务中的属性。为此，我需要知道该州的名称onEnter and onExit钩子。这对于onExit钩子，因为我可以注入$state服务并读取当前状态的名称。但由于当前状态尚未设置，当onEnterhook 被调用时无法知道我们要转换到什么状态。

我仍然需要对状态的其他部分进行精细控制，因此我宁愿没有任何 for 循环。我正在寻找一种能够通过的方法onEnter函数到状态，同时仍然在函数本身内部检索状态的名称。

这是我写的代码：

function onEnter($state, Steps) {
  var stateName = $state.current.name; // Not possible. The current state has not been set yet! 
  var step = Steps.getByStateName(stateName);

  step.activate();
}

function onExit($state, Steps) {
  var stateName = $state.current.name; // No problem. We know about the state. 
  var step = Steps.getByStateName(stateName);

  step.deactivate();
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnter,
    onExit: onExit
  });

我现在使用的解决方案是使用工厂来创建上下文onEnter函数传递给状态。这远非理想，因为我仍然需要将州名传递给它。

以下是上述解决方法的示例：

function onEnterFactory(stateName) {
  return function onEnter(Steps) {
    var step = Steps.getByStateName(stateName);

    step.activate();
  }
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnterFactory('step1')
  });

Use this在 onEnter onExit 挂钩中。 onEnter 由以下命令调用：

$injector.invoke(entering.self.onEnter, entering.self, entering.locals.globals);

第二个参数为$injector.invoke的值是this对于它调用的函数。所以你的代码应该如下所示：

function onEnter(Steps) {
  var stateName = this.name; 
  var step = Steps.getByStateName(stateName);

  step.activate();
}

function onExit(Steps) {
  var stateName = this.name;
  var step = Steps.getByStateName(stateName);

  step.deactivate();
}

$stateProvider
  .state('step1', {
    url: '/step1',
    templateUrl: 'templates/step1.html',
    controller: 'StepOneController',
    onEnter: onEnter,
    onExit: onExit
  });

这是访问州名称的工作示例onEnter and onExit hooks:

angular.module('myApp', ['ui.router'])

.config(function($stateProvider) {
  function onEnter() {
    console.log('Entering state', this.name);
  }

  function onExit() {
    console.log('Exiting state', this.name);
  }

  $stateProvider.state('state-1', {
    url: '/state-1',
    template: '<p>State 1</p>',
    onEnter: onEnter,
    onExit: onExit
  }).state('state-2', {
    url: '/state-2',
    template: '<p>State 2</p>',
    onEnter: onEnter,
    onExit: onExit
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

<div ng-app="myApp">
  <nav>
    <a ui-sref="state-1">State 1</a>
    <a ui-sref="state-2">State 2</a>
  </nav>

  <div ui-view></div>
</div>