在其 `onEnter` 钩子中获取状态的名称 [英] Getting the name of a state in its `onEnter` hook

问题描述

我正在构建一个应用程序，我想在用户进入和离开路线时切换服务中的属性.为此，我需要知道 onEnter 和 onExit 挂钩中的状态名称.这对于 onExit 钩子来说相对容易，因为我只需注入 $state 服务并读取当前状态的名称.但是由于在调用 onEnter 钩子时还没有设置当前状态，因此无法知道我们正在转换到什么状态.

我仍然需要很好地控制状态的其他部分，所以我宁愿没有任何 for 循环.我正在寻找一种方法，能够将 onEnter 函数传递给状态，同时仍然在函数本身内部检索状态名称.

这是我写的代码:

function onEnter($state, Steps) {var stateName = $state.current.name;//不可能.当前状态尚未设置！var step = Steps.getByStateName(stateName);step.activate();}函数 onExit($state, Steps) {var stateName = $state.current.name;//没问题.我们知道国家.var step = Steps.getByStateName(stateName);step.deactivate();}$stateProvider.state('step1', {网址:'/step1'，templateUrl: 'templates/step1.html',控制器:'StepOneController'，onEnter: onEnter,退出:退出});

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

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

function onEnterFactory(stateName) {返回函数 onEnter(Steps) {var step = Steps.getByStateName(stateName);step.activate();}}$stateProvider.state('step1', {网址:'/step1'，templateUrl: 'templates/step1.html',控制器:'StepOneController'，onEnter: onEnterFactory('step1')});

解决方案

在 onEnter onExit 钩子中使用 this.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();}函数 onExit(Steps) {var stateName = this.name;var step = Steps.getByStateName(stateName);step.deactivate();}$stateProvider.state('step1', {网址:'/step1'，templateUrl: 'templates/step1.html',控制器:'StepOneController'，onEnter: onEnter,退出:退出});

以下是在 onEnter 和 onExit 挂钩中访问状态名称的工作示例:

angular.module('myApp', ['ui.router']).config(function($stateProvider) {函数 onEnter() {console.log('进入状态', this.name);}函数 onExit() {console.log('退出状态', this.name);}$stateProvider.state('state-1', {url: '/state-1',模板:'<p>状态1</p>'，onEnter: onEnter,退出:退出}).state('state-2', {url: '/state-2',模板:'<p>状态2</p>'，onEnter: onEnter,退出:退出});});

<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"><导航><a ui-sref="state-1">状态 1</a><a ui-sref="state-2">状态 2</a></nav><div ui-view></div>

I'm building an application where I want to toggle a property in a service the moment a user enters and leaves a route. To do this I need to know about the state's name in the onEnter and onExit hooks. This is relatively easy for the onExit hook since I can just inject the $state service and read the name of the current state. But since the current state has not been set yet when the onEnter hook is called there is no way of knowing what the state we're transitioning to.

I still need to to have fine control over other parts of the state so I'd rather not have any for loops. I'm looking for a way to be able to pass the onEnter function to the state, whilst still retrieving the state's name inside of the function itself.

Here is the code I've written:

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
  });

My solution I'm using for now is to use a factory to create context for the onEnter function passed to the state. This is far from ideal because I still need to pass the state's name to it.

Here is an example of said workaround:

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 in onEnter onExit hooks. onEnter is invoked by following command:

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

The second paramater of $injector.invoke is the value of this for the function it calls. So your code should look as follows:

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
  });

Here is a working example of accessing a state's name in the 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>

这篇关于在其 `onEnter` 钩子中获取状态的名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！