角UI路由器——子状态的解析总是等待父状态的解析

In the in depth guide of the ui router it has a note in the nested states chapter where it says that

在ui路由器的深度指南中，它在嵌套状态一章中有一个说明

NOTE: The resolve keys MUST be injected into the child states if you want to wait for the promises to be resolved before instantiating the children.

注意:如果您希望等待承诺在实例化子状态之前得到解决，则必须将解析键注入子状态。

I am using the following example and it seems to me that the child states always waits for the promise of the parent state resolve key to resolve regardless of whether i inject it in the state.

我正在使用下面的示例，在我看来，子状态总是等待父状态解决键的承诺，不管我是否将它注入到状态中。

            .state('contacts', {
                templateUrl: 'contacts.html',
                resolve: {
                    // a key that resolves in a second
                    resA: function($q, $timeout) {
                        var deferred = $q.defer();
                        $timeout(function() {
                            deferred.resolve('promise resolved');
                        }, 1000);
                        return deferred.promise;
                    }
                },
                controller: function($scope, resA) {
                    console.log(resA);
                }
            })
            .state('contacts.list', {
                templateUrl: 'contacts.list.html',
                // here i do not inject the resolved key from the
                // parent state but the ctrl still waits 1 second
                // before it executes
                controller: function() {
                    console.log('resolved');
                }
            });

Thus, i cannot understand the note from the official guide.

因此，我无法理解官方指南上的说明。

1 个解决方案

#1

As for controllers - yes, they always wait for their states (or parent states) to resolve. But there might be a situation when your child state also has a resolve object, and some of it's logic depends on parent's resolve keys - in this case you should provide this dependencies explicitly; For example:

至于控制器——是的，它们总是等待状态(或父状态)的解析。但是，当您的子状态也有一个解析对象时，可能会出现这种情况，其中一些逻辑依赖于父方的解析键——在这种情况下，您应该显式地提供这种依赖关系;例如:

.state('contacts', {
  templateUrl: 'contacts.html',
  resolve: {
    // a key that resolves in a second
    resA: function($q, $timeout) {
      var deferred = $q.defer();
      $timeout(function() {
        console.log('I am second, although I am a parent');
        deferred.resolve({id: 'initial'});
      })
      return deferred.promise;
    }
  },
  controller: function($scope, resA) {
    console.log(resA);
  }
})
.state('contacts.list', {
  templateUrl: 'contacts.list.html',
  resolve: {
    // if you do not provide `resA` dependency here
    // your child's `resB` will be the first to resolve
    resB: function() {
      console.log('I am first');
      return 'child promise resolved';
    }
  },
  controller: function() {
    console.log('resolved');
  }
});