Angular JS ui-router如何从父级重定向到子状态？

Question

当使用onEnter重定向到某个状态时,如果新状态是当前状态的子状态,则会发生无限循环.

例:

$stateProvider
  .state 'inventory',
    url: '/inventory'
    templateUrl: 'views/inventory.html'
    controller: 'InventoryCtrl'
    onEnter: () ->
      $state.go 'inventory.low'
  .state 'inventory.low',
    url: '/low'
    templateUrl: 'views/inventory-table.html'
    controller: 'LowInventoryCtrl'

什么时候:

$state.go 'inventory.low'

被调用,状态inventory被重新初始化,导致它被再次调用=无限循环.

但是,如果重定向状态是:

$state.go 'otherStateThatIsNotAChild'

此问题不会发生.我假设父状态正在重新初始化,但为什么呢？

1. 为什么在.go调用子状态时父状态会重新初始化？
2. 然后,你会怎样处理重定向到儿童状态？

Answer 1

1)为什么在子状态调用.go时会重新初始化父状态？

当转换正在进行时,任何$ state.go/transitionTo都将导致当前进程中的转换被取代.被取代的进程内转换将立即取消.由于在inventory调用所有状态的onEnters时原始转换到未完成,原始转换将被取消,并且从先前活动的状态开始新的转换inventory.low.

请参阅ui-router src https://github.com/angular-ui/ui-router/blob/master/src/state.js#L897 ...

2)那么,你会如何处理重定向到子状态？

你可以...

• 裹$state.go在一个$timeout()允许重定向之前的原始过渡才能完成.
• 改为从控制器调用$ state.go.UI转换器在转换完成后从ui-view指令调用控制器.

在任何情况下,请确保您希望您的应用程序像这样重定向.如果用户直接导航到任何其他子状态的库存(例如inventory.high),则仍会发生重定向,从而强制它们inventory.low不符合预期.

Answer 2

我有同样的问题.我找到的简单解决方案是监听状态更改并从那里重定向到您的子状态.

默认情况下,这会使路由重定向到子状态.它不需要做, url: ''或者$state.go()它们不能正常工作.

所以,在config文件中:

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
  if (toState.redirectTo) {
    event.preventDefault();
    $state.go(toState.redirectTo, toParams);
  }
});

在state档案中:

.state('home', {
  url: '',
  redirectTo: 'home.list'
});

我在gist上做了一个例子:https://gist.github.com/nikoloza/4ab3a94a3c6511bb1dac