Angular JS ui-router 如何从父级重定向到子状态? [英] Angular JS ui-router how to redirect to a child state from a parent?

问题描述

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

When using onEnter to redirect to a state, if the new state is a child of the current state, an infinite loop occurs.

示例:

$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被重新初始化，导致再次被调用=无限循环.

Is called, the state inventory is re-initialized, causing it to be called again = infinite loop.

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

However, if the redirect state is:

$state.go 'otherStateThatIsNotAChild'

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

This issue does not occur. I assume that the parent state is being re-initialized, but why?

1. 为什么在子状态上调用 .go 时会重新初始化父状态?
2. 那么，您将如何处理重定向到子状态?

1. Why is the parent state being reinitialized when .go is called on a child state?
2. How then, would you handle redirecting to a child state?

推荐答案

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

1) Why is the parent state being reinitialized when .go is called on a child state?

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

While a transition is in process, any $state.go/transitionTo will cause the currently in process transition to be Superseded. An in-process transition that is superseded is cancelled immediately. Since your original transition to inventory is not completed by the time all the states' onEnters are called, the original transition is cancelled and a new transition to inventory.low is started from the previously active state.

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

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

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

2) How then, would you handle redirecting to a child state?

你可以...

• 将 $state.go 包裹在 $timeout() 中，以允许在重定向之前完成原始转换.
• 改为从您的控制器调用 $state.go.UI-router 在转换完成后从 ui-view 指令调用控制器.

• Wrap $state.go in a $timeout() to allow the original transition to complete before redirecting.
• Call $state.go from your controller instead. UI-router invokes the controller from the ui-view directive AFTER the transition is completed.

无论如何，请务必确保您的应用程序像这样重定向.如果用户直接导航到库存的任何其他子状态(例如 inventory.high)，重定向仍然会发生，迫使他们到 inventory.low他们的意图.

In any case, be very sure you want your app to redirect like this. If a user navigated directly to any other child state of inventory (such as inventory.high), the redirect will still occur, forcing them to inventory.low which would not be what they intended.

这篇关于Angular JS ui-router 如何从父级重定向到子状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！