如何在ui-router resolve属性中使用ocLazyLoad解析文件

Posted 2021-04-17

我想通过使用ui-router resolve属性来查看api调用，然后我的resolve属性依赖于ocLazyLoad已解析文件。所以，我得到这个错误Error: [$injector:unpr] Unknown provider: SavedFactoryProvider <- SavedFactory

这是我的代码

$stateProvider.state('app.saved', {
    url: '/saved',
    templateUrl: 'app/modules/saved/views/saved.html',
    controller: 'SavedSearchCtrl',
    resolve: {
      loadFiles: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load([{
          name: 'app.saved',
          files: [
            'app/modules/saved/controller.js',
            'app/modules/saved/factory.js',
          ],
          cache: false
        }]);
      }],
      searches: ['loadFiles', 'SavedFactory', function(loadFiles, SavedFactory) {
        return SavedFactory.getSavedSearches();
      }]
    }
});

谢谢！

答案

路线解析器与$q.all并行解决。由于$ocLazyLoad.load(...)是异步的，因此在调用searches时肯定无法完成。

$ocLazyLoad.load(...)返回一个可以链接的承诺，以避免竞争条件，例如：

  searches: function($ocLazyLoad, $injector) {
    return $ocLazyLoad.load([
      {
        name: 'app.saved',
        files: [
          'app/modules/saved/controller.js',
          'app/modules/saved/factory.js',
        ],
        cache: false
      }
    ])
    .then(function () {
      var SavedFactory = $injector.get('SavedFactory');
      return SavedFactory.getSavedSearches();
    });
  }

与ngRoute相反，UI路由器支持解析器的层次结构;依赖关系图正在建立在状态变化上。它们的解析顺序可以通过它们的依赖性来确定。所以searches应该将loadFiles列为依赖：

  searches: function(loadFiles, $injector) {
    var SavedFactory = $injector.get('SavedFactory');
    return SavedFactory.getSavedSearches();
  }

由于UI路由器如何在内部调用解析器函数，$injector.get显然是必要的。