带有解析的Angularjs ui

本文介绍了带有解析的Angularjs ui-router抽象状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

是否可以使用需要解析数据的 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:

• 角度 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...