使用AngularJS中的UI-Router将状态重定向到默认子状态

Question

我正在创建一个基于标签的页面,显示一些数据.我在AngularJs中使用UI-Router来注册状态.

我的目标是在页面加载时打开一个默认选项卡.每个选项卡都有子选项卡,我希望在更改选项卡时打开默认子选项卡.

我正在测试onEnter函数和内部我正在使用$state.go('mainstate.substate');但由于循环效果问题似乎无法工作(在state.go上,它调用它的父状态等等,然后它变成一个循环).

$stateProvider

.state('main', {
  url: '/main',
  templateUrl: 'main.html',
  onEnter: function($state) {
    $state.go('main.street');
  }
})

.state('main.street', {
  url: '/street',
  templateUrl: 'submenu.html',
  params: {tabName: 'street'}
})

在这里,我创建了一个plunker演示.

现在一切正常,除了我没有打开默认选项卡,这正是我需要的.

感谢您的建议,意见和想法.

Answer 1

我在这里创建了一个例子.

这个解决方案来自对使用.when() (/sf/answers/1899178011/)重定向的问题的一个很好的"评论" 和非常酷的解决方案(由Chris T,但原始帖子是由yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

首先让我们使用重定向设置扩展main:

$stateProvider
    .state('main', {
      url: '/main',
      templateUrl: 'main.html',
      redirectTo: 'main.street',
    })

并且只添加这几行

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

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

这样我们可以使用默认重定向调整任何状态... 在此处查看

编辑:添加@Alec评论的选项以保留浏览器历史记录.

Answer 2

事实上,即使Radim提出的这个解决方案确实完成了这项工作,我也需要记住每个标签的子选项卡(状态).

所以我找到了另一种做同样事情的解决方案,但也记得每个标签子状态.

我所要做的就是安装ui-router-extras并使用深度状态重定向功能:

$stateProvider
  .state('main.street', {
     url: '/main/street',
     templateUrl: 'main.html',
     deepStateRedirect: { default: { state: 'main.street.cloud' } },
  });

谢谢!

Answer 3

从ui-router 1.0版本开始,它支持一个redirectTo属性.例如:

.state('A', {
  redirectTo: 'A.B'
})

Answer 4

从ui-router 1.0版开始,使用IHookRegistry.onBefore()引入了一个默认钩子,如http://angular-ui.github.io/ui-router/feature-1.0/中的示例数据驱动默认子窗口所示.接口/ transition.ihookregistry.html#onbefore

// state declaration
{
  name: 'home',
  template: '<div ui-view/>',
  defaultSubstate: 'home.dashboard'
}

var criteria = {
  to: function(state) {
    return state.defaultSubstate != null;
  }
}
$transitions.onBefore(criteria, function($transition$, $state) {
  return $state.target($transition$.to().defaultSubstate);
});