AngularJS UI路由器抽象状态与解决

小编典典

AngularJS UI路由器抽象状态与解决

angularjs

是否可以使用需要解析数据的ui-router来建立抽象状态？我需要使用个人资料信息加载页面的上半部分，然后在页面底部添加一个用于加载其他详细信息的子导航。这个想法是，抽象状态每次都会加载配置文件信息，而不管我处于哪个子状态。它似乎不起作用。

例：

.state('app.profile', {
    abstract: true,
    url: 'user/:username',
    views: {
        content: {
            templateUrl: 'views/frontend/profile.html',
            controller: 'ProfileCtrl',
            resolve: {
                data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
                    var username = $stateParams.username;
                    return ProfileService.getProfile(username);
                }]
            }
        }
    }
})
.state('app.profile.something', {
    url: '',
    views: {
        profile: {
            templateUrl: 'views/frontend/profile.something.html',
            controller: 'ProfileCtrl',
            resolve: {
                data: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
                    var username = $stateParams.username;
                    return ProfileService.getProfileSomething(username);
                }]
            }
        }
    }
})

阅读 327

2020-07-04

共1个答案

小编典典

和它的 plnkr

因此，在我们的情况下，我们需要在父级中进行此更改

resolve: {
    dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfile(username);
    }]
}

和这个孩子

resolve: {
    dataChild: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfileSomething(username);
    }]
}

因此，与其在父母和孩子中使用resolve：{data：…}，不如说它们是：

// parent state
resolve : { dataParent: ... } 
// child state
resolve : { dataChild: ... }

一个有效的例子应该比其他例子更好。

2020-07-04