小编典典

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

javascript

我正在创建一个基于标签的页面,其中显示了一些数据。我在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演示。

目前,一切正常,除了我没有打开默认选项卡,而这正是我所需要的。

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


阅读 446

收藏
2020-04-25

共1个答案

小编典典

更新: 1.0向前支持开箱即用的redirectTo。


该解决方案来自一个不错的“注释”,它涉及到使用.when() 进行重定向的问题,并且
一个非常不错的 解决方案 (由Chris T,但原始帖子由yahyaKacem撰写)

因此,首先让我们通过重定向设置扩展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'})
      }
    });
}]);
2020-04-25