angularjs - angular ui-router 解析父状态

Question

在我的父状态下，我有一个resolve。目前，我没有在任何子状态中注入(inject) resolve 键。

我假设我的子状态不会等待这个决心/ promise 得到解决。但是当我设置超时时，我可以看到我的子状态确实在等待。

这是正确的行为吗？

.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'
        })

用户服务.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 没有注入(inject) userDetails。但是当我在 userService 中设置超时时，我看到我的账单状态确实在等待。

Answer 1

可以在这里找到答案(让我引用几行和片段):

Inherited Resolved Dependencies

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;
      }

因此，正如我们在文档中看到的那样，可以在子对象上使用对父对象的解析。这实际上是原因，虽然我们必须等待此问题解决......然后我们才能继续。

但我要说，这是意料之中的。更奇特的功能是:

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.

这是(据我所知)计划在不久的将来作为一个功能......

EXTEND - await all to continue 就是答案

得到答案:

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

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(... 最后，直到所有的东西都没有完成，没有结果- 返回 $q.all(promises)