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 Onwards支持redirectTo开箱即用。

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

我创建了an example here。

此解决方案来自对使用.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'})
      }
    });
}]);

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

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

Answer 2

事实上，即使 Radim 提出的解决方案确实完成了这项工作，我也需要记住每个标签的子标签（州）。

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

我所要做的就是安装ui-router-extras并使用deep state redirect功能：

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

谢谢！

Answer 3

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

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

Answer 4

从ui-router 1.0版开始，使用 IHookRegistry.onBefore（）引入了一个默认钩子，如{{3>示例中的数据驱动默认子窗口所示}}

// 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 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');
  },
});

我希望它有所帮助！

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

6 个答案: