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

小编典典

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

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

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

阅读 445

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