如何在使用UI-Router进行转换时将用户定向到第一个子状态ID

Question

在我的角应用程序中，使用UI-Router，拥有一个父状态（页面），其中包含一些标题信息，然后是一个填充了该父项子路径的导航列表。

它工作得很好，但是没有任何孩子活动就开始了。

我希望在用户进入朴实的父状态时激活第一个子状态（我无法知道哪个子ID将是第一个，尽管我可以在父控制器中获取它）

考虑以下代码：

$stateProvider
.state('parent', {
    url: '/parent',
    templateUrl: 'app/parent/parent.html',
    controller: 'ParentController',
    controllerAs: 'prnt'
  })
  .state('parent.child', {
    url: '/parrent/{childId}',
    templateUrl: 'app/parent/childlist.html',
    controller: 'ChildController',
    controllerAs: 'chld'
  });

提前感谢您的帮助。

Answer 1

嗯，如果你知道的话，很难说如何用childId重定向到第一个子状态：

  

...我无法知道哪个子ID将是第一个...

但这是我最喜欢的方式：

Redirect a state to default substate with UI-Router in AngularJS

我们挂钩一个监听器来状态改变：

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

然后我们可以用这样的设置来装饰状态：

$stateProvider
    .state('parent', {
      url: '/parent',
      ...
      redirectTo: 'parent.child',
    })

现在我们甚至可以通过声明该子状态的默认ID

.state('parent.child', {
    url: '/parrent/{childId}',
    params: { childId: 1},
    ...

params: { childId: 1}, 是我可以设想的最佳方式来分配默认ID，因为：

• 对于任何组合父/子
可能会有所不同
• 现在应该是应该是其默认ID（而不是监听器）的子状态

在此处详细了解params : {}：

Angular ui router passing data between states without URL