使用AngularJS中的UI路由器将状态重定向到默认子状态

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

本文关键字：状态 重定向 默认 AngularJS 中的 UI 路由器 使用      更新时间：2023-09-26

我正在创建一个基于选项卡的页面，其中显示一些数据。我在AngularJs中使用UI路由器来注册状态。

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

我用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演示。

目前一切正常，只是我没有打开默认选项卡，这正是我所需要的。

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

更新：1.0向前支持开箱即用的重定向。

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

我在这里创建了一个示例。

这个解决方案来自于对使用.when()重定向的问题的一个很好的"注释"(https://stackoverflow.com/a/27131114/1679310)和真的很酷的解决方案（由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评论中的选项，以保留浏览器历史记录。

事实上，即使Radim提出的这个解决方案确实完成了任务，我也需要记住每个选项卡的子选项卡（状态）。

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

我所要做的就是安装额外的ui路由器并使用深度状态重定向功能：

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

谢谢！

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

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

自ui路由器的1.0版本以来，已经使用IHookRegistry.onBefore（）引入了默认挂钩，如中的示例Data Driven default Substate所示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);
});

app.config(function($stateProvider,$urlRouterProvider){
    $urlRouterProvider.when("/state","/state/sub-state");
    })

如果有人来这里寻求关于如何实现一个状态的简单重定向的答案，而我却没有机会使用新路由器。。。

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

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

如果你不能，那么只需手动重定向：

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

我希望它能有所帮助！

相关文章：