角度ui视图默认/正确用法:

Question

这是用于主视图之外的"子集"视图，其中有一个选项卡栏（地图、市场和图表）。单击它们时，它们将通过UiSref在该标记中正确输出。

 <div ui-view name="inception2"></div>

这3个视图在我的路线文件中定义如下。

如何将uiViewName中的视图默认为tsView2？目前我需要点击才能进行路由。同样，我设置了一个路由器文件，它确实有抽象状态和所有内容——这只是为了在现有项目中进行简单的选项卡练习。谢谢

.state('tsView1', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsVview1.html'
    }
  } 
})
.state('tsView2', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView2.html'
    }
  } 
})
.state('tsView3', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView3'
    }
  } 
})

Answer 1

您可以尝试此解决方案

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

介绍一个小型引擎，读取设置redirectTo

app.run(['$rootScope', '$state', function($rootScope, $state) {
    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

然后将默认的子应用于其父

.state('main', {
  redirectTo: 'tsView2',
  ...
  }
.state('tsView2', {
  parent: 'main'
  ...
  }

换句话说，这需要tsViews是子级。。。但我想它应该已经是真正的了

这是我的主视图的"子集"视图，我有

Answer 2

使用$urlRouterProvider使用otherwise方法配置默认路由

.state('tsView2', {
  url: '/tsview2',
  views: {
    'inception2': {
     templateUrl: 'client/templates/tsView2.html'
   }
  } 
})

$urlRouterProvider.otherwise('/tsview2');

有关$urlRouterProvider的详细信息，请参阅：https://github.com/angular-ui/ui-router/wiki/URL-Routing#urlrouterprovider