带有解析的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:
及其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屋!