angularjs – 在“onEnter”钩子中获取状态的名称

发布时间：2020-12-17 07:43:48 所属栏目：安全来源：网络整理

导读：我正在构建一个应用程序,我想在用户进入和离开路由的时刻切换服务中的属性.为了做到这一点,我需要知道onEnter和onExit钩子的状态名.这对于onExit钩子来说比较容易,因为我只需要注入$state服务并读取当前状态的名称.但是由于当调用onEnter钩子时尚未设置当前

我正在构建一个应用程序,我想在用户进入和离开路由的时刻切换服务中的属性.为了做到这一点,我需要知道onEnter和onExit钩子的状态名.这对于onExit钩子来说比较容易,因为我只需要注入$state服务并读取当前状态的名称.但是由于当调用onEnter钩子时尚未设置当前状态,因此无法知道我们正在转换的状态.

我仍然需要对状态的其他部分进行精细控制,所以我宁可没有任何循环.我正在寻找一种能够将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',onEnter: onEnterFactory('step1')
  });

使用onEnter onExit钩子. onEnter由以下命令调用：

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

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

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',onExit: onExit
  });

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

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>',onExit: onExit
  }).state('state-2',{
    url: '/state-2',template: '<p>State 2</p>',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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!