如何为非抽象状态创建默认嵌套状态

Question

我使用 ui-router 如下：

3 个主要状态 home、profile 和 settings 如下所示：

第二个状态 profile 有 2 个嵌套状态 profile.about 和 profile.main

我需要在索引页面上可单击的配置文件状态加载配置文件视图并重定向到默认嵌套状态，即 profile.about 此处

这里是 plunker 到目前为止我得到的。

我知道这个解决方案：

how to set up a defaultindex child state
how to set default child view with angular-ui-router

和其他人，但都需要一个抽象的父级，它是不可点击的，因此是抽象的。

所以，总而言之，我的问题是如何为非抽象状态创建嵌套默认视图？

Answer 1

如评论中所述，此处的解决方案通常使用 .when() 定义，如下所述：

Angular UI-Router $urlRouterProvider .when not working *anymore*
Angular UI-Router $urlRouterProvider .when not working when I click <a ui-sref="...">

在 2.0.13 之前的版本中，我们可以像这样使用本机解决方案（myService 是一些默认值的地方...如果没有参数则不需要）:

var whenConfig = ['$urlRouterProvider', function($urlRouterProvider) {

    $urlRouterProvider
      .when('/app/list', ['$state', 'myService', function ($state, myService) {
            $state.go('app.list.detail', {id: myService.Params.id});
    }])
    .otherwise('/app');
}];
...
app.config(whenConfig)

但是在版本 2.0.13 中修复后这不起作用，但我们可以使用此解决方法来实现：

var onChangeConfig = ['$rootScope', '$state',
 function ($rootScope, $state) {

  $rootScope.$on('$stateChangeStart', function (event, toState) {    
    if (toState.name === "app.list") { 
      event.preventDefault();
      $state.go('app.list.detail', {id: 2});
    }
  });

}]

有关其他示例，另请参阅此错误报告：https://github.com/angular-ui/ui-router/issues/1584

如何为非抽象状态创建默认嵌套状态

how to make a default nested state for a non abstracted state

javascript

angularjs

angular-ui-router