在`onEnter`钩子中获取状态的名称

Question

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

我仍然需要对状态的其他部分进行精细控制,所以我宁愿没有任何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')
  });

Answer 1

在 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和onExit钩子中访问状态名称的工作示例：

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

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