AngularJS 和 Typescript - 注入其他服务的服务未定义

Posted 2023-03-13

【中文标题】AngularJS 和 Typescript - 注入其他服务的服务未定义

【英文标题】：AngularJS and Typescript - Services injected into other services are undefined

【发布时间】：2014-05-07 04:12:59

【问题描述】：

我正在使用 this starter template 和 this SO post 中列出的修改。到目前为止，它一直一帆风顺——我正在尝试将服务注入另一个服务的构造函数，但注入的值始终是“未定义”。没有抛出任何错误。

这是一个简化的例子：

module app.services 
    export class dashboardFilterService implements IService 
        constructor($rootScope: ng.IRootScopeService) 
            // $rootScope is undefined...
            //$rootScope.$broadcast('FilterInitialized');
        
    

app.registerService('dashboardFilterService', ['$rootScope']);

将服务注入控制器工作正常。我对打字稿和角度都很陌生，所以这对于有更多经验的人来说可能很明显。下面是编译好的js供参考：

var app;
(function (app) 
    (function (services) 
        var dashboardFilterService = (function () 
            function dashboardFilterService($rootScope) 
                // $rootScope is undefined...
                //$rootScope.$broadcast('FilterInitialized');
            
            return dashboardFilterService;
        )();
        services.dashboardFilterService = dashboardFilterService;
    )(app.services || (app.services = ));
    var services = app.services;
)(app || (app = ));
app.registerService('dashboardFilterService', ['$rootScope']);

【参考方案1】：

推荐模式：

module app.services 
    export class dashboardFilterService implements IService 
        static $inject = ['$rootScope']; // This should do it
        constructor($rootScope: ng.IRootScopeService) 
            //$rootScope.$broadcast('FilterInitialized');
        
    
    app.registerService('dashboardFilterService', dashboardFilterService );

PS：我做了一个关于这个主题的视频：http://www.youtube.com/watch?v=Yis8m3BdnEM&hd=1

【参考方案2】：

好吧，我不知道 typescript，但在 javascript 中进行依赖注入最安全的方法是

app.service('serviceName', ['$rootScope', 'anotherServ', function($rootScope, anotherService)

]);

我认为你没有将服务函数作为数组中的最后一个元素传递，所以在你的情况下，是这样的：

app.registerService('dashboardFilterService', ['$rootScope', dashboardFilterService]);

【讨论】：

app.registerService 辅助函数确实以这种方式传递参数，所以我仍然不确定为什么该方法不起作用。这是代码：export function registerService(className: string, services = []) var service = className[0].toLowerCase() + className.slice(1); services.push(() => new app.services[className]()); angular.module('app.services').factory(service, services);