父状态的角度 ui-router 解析 [英] angular ui-router resolve for parent state
问题描述
在我的父状态中，我有一个 resolve.目前，我没有在任何子状态中注入 resolve 键.
In my parent state I have a resolve. Currently, I do not inject the resolve key in any child state.
我认为我的孩子状态不会等待这个决心/承诺得到解决.但是当我设置超时时，我可以看到我的子状态确实在等待.
I assumed that my child state would not wait for this resolve/promise to be resolved. But when I set a timeout, I can see my child state does wait.
这是正确的行为吗?
.config(function ($stateProvider, $urlRouterProvider, STATES) {
$stateProvider
.state(STATES.ROOT, {
abstract: true,
template:'<div ui-view=""></div>',
resolve: {
UserService: 'UserService',
userDetails: function(UserService){
return UserService.getUserProfile();
}
}
})
.state(STATES.BILLING, {
url: '/bill/checkClientContext.html',
templateUrl: 'bill/checkClientContext.html',
controller: 'BillingController'
})
UserService.js
UserService.js
'use strict';
angular.module('nabc.data')
.service('UserService', ['AjaxService', '$timeout','$q', function(AjaxService, $timeout, $q) {
var getUserProfile = function() {
var promise = AjaxService.get('userProfile');
var deferred = $q.defer();
$timeout(function(response){
deferred.resolve(response);
}, 5000);
return deferred.promise;
};
return {
getUserProfile: getUserProfile
};
}]);
正如您在上面看到的，BillingController 不会注入 userDetails.但是当我在 userService 中设置超时时，我看到我的计费状态确实在等待.
As you can see above the BillingController does not inject in userDetails. But when i set a timeout in the userService, i see that my billing state does wait.
推荐答案
可以在这里找到答案(让我引用几行和片段):
0.2.0 版的新功能
子状态将从父状态继承解析的依赖项，它们可以覆盖.然后，您可以将解析的依赖项注入控制器并解析子状态的函数.
Child states will inherit resolved dependencies from parent state(s), which they can overwrite. You can then inject resolved dependencies into the controllers and resolve functions of child states.
$stateProvider.state('parent', {
resolve:{
resA: function(){
return {'value': 'A'};
}
},
controller: function($scope, resA){
$scope.resA = resA.value;
}
})
.state('parent.child', {
resolve:{
resB: function(resA){
return {'value': resA.value + 'B'};
}
},
controller: function($scope, resA, resB){
$scope.resA2 = resA.value;
$scope.resB = resB.value;
}
因此，正如我们在文档中所见，对父级的解析可以用于子级.这就是原因，虽然我们必须等待解决...然后才能继续.
So, as we can see in the doc, resolve on parent could be used on a child. And that is in fact reason, while we have to wait for this to be resolved... before we can continue.
但我想说，这是意料之中的.更花哨的功能是:
But I would say, that this is expected. The more fancy feature would be:
如果子状态定义了 resolve - 而父状态没有 - 看到父视图呈现会很棒，并且只让子视图等待.
if the child state has defined
resolve- and parent does not - it would be great to see parent views rendered, and let only child's views to wait.
这是(据我所知)计划在不久的将来作为一项功能...
This is (as far as I know) planned in the near future as a feature...
要得到答案:
所有解析 - 在当前状态和所有其父状态中声明 - 必须等待继续用电流?即使当前状态控制器不需要任何这些值?
Must all the resolves - declared in current state and all its parent states - be awaited to continue with current? Even if current state controllers do not require any of these values?
请注意代码:state.js
Do observe the code: state.js
function resolveState(state, params, paramsAreFiltered, inherited, dst, options) {
// Make a restricted $stateParams with only the parameters that apply to this state if
// necessary. In addition to being available to the controller and onEnter/onExit callbacks,
// we also need $stateParams to be available for any $injector calls we make during the
// dependency resolution process.
var $stateParams = (paramsAreFiltered) ? params : filterByKeys(state.params.$$keys(), params);
var locals = { $stateParams: $stateParams };
// Resolve 'global' dependencies for the state, i.e. those not specific to a view.
// We're also including $stateParams in this; that way the parameters are restricted
// to the set that should be visible to the state, and are independent of when we update
// the global $state and $stateParams values.
dst.resolve = $resolve.resolve(state.resolve, locals, dst.resolve, state);
var promises = [dst.resolve.then(function (globals) {
dst.globals = globals;
})];
if (inherited) promises.push(inherited);
// Resolve template and dependencies for all views.
forEach(state.views, function (view, name) {
var injectables = (view.resolve && view.resolve !== state.resolve ? view.resolve : {});
injectables.$template = [ function () {
return $view.load(name, { view: view, locals: locals, params: $stateParams, notify: options.notify }) || '';
}];
promises.push($resolve.resolve(injectables, locals, dst.resolve, state).then(function (result) {
// References to the controller (only instantiated at link time)
if (isFunction(view.controllerProvider) || isArray(view.controllerProvider)) {
var injectLocals = angular.extend({}, injectables, locals);
result.$$controller = $injector.invoke(view.controllerProvider, null, injectLocals);
} else {
result.$$controller = view.controller;
}
// Provide access to the state itself for internal use
result.$$state = state;
result.$$controllerAs = view.controllerAs;
dst[name] = result;
}));
});
// Wait for all the promises and then return the activation object
return $q.all(promises).then(function (values) {
return dst;
});
}
我决定在这里引用完整的方法，但最重要的部分是:var promises = []; 的声明.这个数组后来被扩展为继续promises.push($resolve.resolve(...)所需的所有解析，最后，直到所有的东西都没有完成，没有结果- return $q.all(promises)
I decided to cite the complete method here, but the most important parts are: declaration of the var promises = [];. This array is later extended with all resolves required to continue promises.push($resolve.resolve(... and finally, untill all the stuff is not done, no result - return $q.all(promises)
这篇关于父状态的角度 ui-router 解析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
