UI 路由器：导航到抽象父状态时重定向到子状态

Question

在我的音乐应用程序中，我在应用程序的顶级状态上有一个 ng-repeat 来创建导航链接。顶级状态之一，称为库，是抽象的并具有子状态（可使用选项卡导航）。因为我使用的是 ng-repeat，所以抽象状态有一个指令 ui-sref="library"。但是，不可能导航到那样的抽象父状态，相反我需要写 ui-sref="library.albums"。由于直接来自状态提供者的 ng-repeat 数据，我无法执行此操作。如何在 "library" 上设置默认子状态，以便无论何时访问该状态，它都会重定向到子状态？

这是我的设置图：

Answer 1

很遗憾，您不能使用 ui-sref 到 link 抽象状态。

您可以尝试类似的方法：

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.name == 'library'){
        event.preventDefault();
        $state.go('library.albums', toParams);
    }
}

虽然不是对每个状态重定向进行硬编码，您可以这样做：

$stateProvider
    .state('library', {
        url: '/library',
        data: {
            redirect: 'library.albums'
        }
    })
    .state('library.albums', {
        url: '/albums',
        data: {
            redirect: false
        }
    });

$rootScope.$on('$stateChangeStart', function(event, toState, toParams){
    if(toState.data && toState.data.redirect){
        event.preventDefault();
        $state.go(toState.data.redirect, toParams);
    }
}

Answer 2

我在寻找相同问题时发现了这个问题，然后我在 Angular UI-Router 的常见问题解答页面上找到了这个问题。 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

如何：设置 default/index child 状态

将 parent 状态抽象化。

$stateProvider
    .state('library', {
        url: '/library',
        abstract: true,
        template: '<ui-view></ui-view>'
    })
    .state('library.albums', {
        url: '/albums',
        template: '<h1>Albums</h1>'
    });

然后如果你给 child 状态一个空的 URL，它将匹配精确的 parent 的 URL。但是，如果您想为 child 保留一个单独的 URL，您可以这样做：
```
$urlRouterProvider.when('/library', '/library/albums');
```

如果您需要更多信息，请阅读给定的 GitHub WIKI URL。

Answer 3

在ui-router的V1.0中，添加了状态参数redirectTo（参见ui-router docs）。这可以让您完成您正在寻找的东西。

在您的示例中，您不会使用 abstract: true，但会重定向到 library.albums 状态。

$stateProvider
    .state('library', {
        url: '/library',
        redirectTo: 'library.albums',
        template: '<ui-view></ui-view>',
       
    })
    .state('library.albums', {
        url: '/albums',
        template: '<h1>Albums</h1>'
    });

有了这个你就可以使用 ui-sref="library"。这非常有用，因为 ui-sref-active 现在可以使用了。

UI 路由器：导航到抽象父状态时重定向到子状态

UI Router: redirect to child state when navigating to abstract parent state

angularjs

angular-ui-router

states

如何：设置 default/index child 状态