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

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 demo.

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

感谢您的建议、意见和想法。

Answer 1

更新： 1.0 及更高版本支持开箱即用的 redirectTo。

https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#redirectto

我创建了 an example here。

这个解决方案来自一个很好的 "Comment" 到一个使用 .when() () 和 [=38= 重定向的问题] 非常酷的解决方案 （Chris T，但最初的 post 是 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'})
      }
    });
}]);

这样我们就可以用它的默认重定向来调整我们的任何状态...检查它here

编辑：添加了@Alec 评论中的选项以保留浏览器历史记录。

Answer 2

事实上，即使 Radim 提出的解决方案完全符合要求，我也需要记住每个选项卡的子选项卡（状态）。

所以我找到了另一个解决方案，它可以做同样的事情，但也会记住每个选项卡子状态。

我所要做的就是安装 ui-router-extras and use the deep state redirect 功能：

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

谢谢！

Answer 3

从 ui-router 的 1.0 版开始，使用 IHookRegistry.onBefore() 引入了默认挂钩，如示例 [=15= http://angular-ui.github.io/ui-router/feature-1.0/interfaces/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);
});

Answer 4

从 ui-路由器的 version 1.0 开始，它支持 redirectTo 属性。例如：

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

Answer 5

app.config(function($stateProvider,$urlRouterProvider){

    $urlRouterProvider.when("/state","/state/sub-state");

    })

Answer 6

如果有人来这里寻求有关如何为某个状态实现简单重定向的答案，但正如我遇到的那样，没有机会使用新路由器...

显然，如果可以的话，@bblackwo 的回答很棒：

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

如果不能，则只需手动重定向它：

$stateProvider.state('A', {
  controller: $state => {
    $state.go('B');
  },
});

希望对您有所帮助！

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

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

javascript

tabs

angularjs

angular-ui-router