Question

我将我的应用程序迁移到ui-router 1.0.0并且我有嵌套状态的这个问题，当onEnter $ transitions钩子触发多次时，就像许多父状态一样（即嵌套有多深）），无论我是否在我的钩子中过滤状态。这是预期还是错误？

$stateProvider
  .state("root", {
    url: "/"
  })
  .state("root.child", {
    url: "/child"
  })
  .state("root.child.child", {
    url: "/child",
      data: {
      foo: "bar"
    }
  });


$transitions.onEnter(
  {to: state => state.data && state.data.foo === "bar"},
  transition =>
    console.log(`on enter triggered`, transition.from(),   transition.to())
);

$state.go("root.child.child");

在这个例子中，钩子被击发了3次。

这里是fiddle。

Answer 1

我在github上用同样的问题创建了一个问题，而ui-router的最大贡献者christopherthielen给了我一个全面的答案，我不得不在这里发帖，以防有人遇到这个问题同样的问题。

根据您对钩子的编码方式，这是预期的。 onEnter挂钩是基于状态的。处理onEnter的伪代码如下：

最初转到root.child.child时，输入了三种状态：root，root.child，root.child.child。

您的条件是{ to: state => state.data && state.data.foo === "bar" }，其中匹配正在输入的三个州中的每一个。这是因为虽然输入了三个州，但只有一个“州”，即root.child.child。该州的数据具有foo: 'bar'数据，因此匹配。

您应该更改标准，使用entering代替to。

{ entering: state => state.data && state.data.foo === 'bar' }

这是一个更新的小提琴：https://jsfiddle.net/2m63pvqb/1/

其他一些可行的方法：

将onEnter放在状态本身上

  .state("root.child.child", {
    url: "/child",
      data: {
      foo: "bar"
    },
   onEnter: ($transition$, $state$) => do sommething specific when entering root.child.child 
  });

如果输入的任何状态都有data.foo ==='bar'

，则每次转换都会执行一些操作

   $transitions.onStart({ entering: state => state.data && state.data.foo === 'bar' }, trans => 
      // do something

Answer 2

使用app.js检查输入按钮是否已命中。你可以在运行区域中插入像$rootScope.hitEnter = function(){ });这样的函数。这应该比在配置区域更好。

ui-router onEnter多次触发

2 个答案: