javascript - 如何使用 $routeProvider 的解析参数来使用显式注入器声明？

Question

$routeProvider resolve参数可以允许向控制器函数注入额外的依赖项。如何将它与显式依赖注入声明结合起来？

示范：

angular.module('myModule', [])
    .config(function($routeProvider) {
        $routeProvider.
            when('/tabOne', { templateUrl : 'tabOne.html', controller: TabOne, 
                resolve: {
                  someDependency: SomeDependency.factoryFunction
                }
     });
            
});

接着：

TabOne.$inject = [ '$scope', 'someFirstService', 'someOtherService' ];

如您所见，上面的 DI 声明将向我的TabOne控制器 (someFirstService和someOtherService) 注入两个服务。这两个工作正常，但我希望我的路线只有在someDependency解决并注入之后才能改变TabOne。如果我只是添加someDependency到控制器函数的参数列表中，它将因 DI 错误而失败。

任何想法如何做到这一点？

Answer 1

首先，您的控制器是否只需要等到依赖关系在被调用之前被解析，还是它实际上需要 SomeDependency.factoryFunction 的解析值？

情况似乎是后者：您想要解析值。

在这种情况下，一种可行的方法是拥有两个 TabOne 控制器。

angular.module('myModule', [])
    .config(function($routeProvider) {
        $routeProvider.
            when('/tabOne', { templateUrl : 'tabOne.html', controller: TabOneRouted, 
                resolve: {
                  someDependency: SomeDependency.factoryFunction
                }
     });

});

function TabOne($scope, someFirstService, someOtherService) {
  ... code here ...
}

function TabOneRouted($scope, someFirstService, someOtherService, someDependency) {
    TabOne($scope, someFirstService, someOtherService);
    ... your code dealing with someDependency here ...
  }