Angularjs ui-router 抽象状态与解析 [英] Angularjs ui-router abstract state with resolve

问题描述

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

Is it possible to make an abstract state with ui-router that needs to resolve data? I need to load the top half of a page with profile info, and then have a sub-nav that loads other details at the bottom of the page. The idea is that the abstract state would load the profile info every time regardless of which child state I am on. It doesn't seem to work.

示例:

.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);
                }]
            }
        }
    }
})

推荐答案

这里的解决方案是区分解析数据的名称.检查这个答案:

Solution here is to distinguish the names of the resolved data. Check this answer:

• angular ui-route 状态父级和解析(嵌套解析)

及其plunker

所以在我们的例子中，我们需要在父级中进行此更改

So in our case we would need this change in parent

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: ... } :

so, instead of working with resolve : { data: ... } in parent and child we would have these:

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

一个工作示例应该比其他词更好......

One working example should be better than other words...

这篇关于Angularjs ui-router 抽象状态与解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！