javascript - 无法在 typescript 中的 Controller 中注入(inject)服务

Question

我对 typescript 不熟悉，我创建了一个 Controller ，我需要在 Controller 中注入(inject)服务，以便我可以使用它的方法。但是我无法使用服务函数及其抛出错误。

错误

TypeError: _this.marketingService.getAllActiveItems is not a function
    at ExportController.getRealCustomerInfo (exportCtrl.js:20)
    at $parseFunctionCall (angular-1.3.js:12475)
    at callback (angular-1.3.js:21703)
    at ChildScope.$eval (angular-1.3.js:14571)
    at ChildScope.$apply (angular-1.3.js:14670)
    at HTMLInputElement.<anonymous> (angular-1.3.js:21708)
    at HTMLInputElement.dispatch (jquery.min.js:14)
    at HTMLInputElement.a.handle (jquery.min.js:14)

Controller

module Marketing.GetRealExportCtrl {

    import IStateParamsService = ng.ui.IStateParamsService;
    import IFlashService = Flash.Services.IFlashService;

    class ExportController {

        listFilters: any;
        fileterExport: any;
        currentValue: string;
        filterValueSelected: string;
        listNumber: number;
        reports: ICustomerInfo[];

        static $inject = ['$stateParams', 'marketingService', '$scope'];

        constructor(private marketingService: IMarketingService) {

            this.listFilters = [
                {
                    name: 'All',
                    listNumber: 1
                },
                {
                    name: 'All PCs',
                    listNumber: 2
                },
                {
                    name: 'All BPs',
                    listNumber: 3
                }];

            this.fileterExport = this.listFilters[0];
            this.listNumber = this.listFilters[0];
        }

        changeFilter = (): void => {
            this.listNumber = this.fileterExport.listNumber;
        }

        getRealCustomerInfo = () => {
            this.marketingService.getRealCustomerInfo(this.listNumber)
                .then((reports: ICustomerInfo[]) => {
                    this.reports = reports;
                }, function (err) {
                    var e = err;
                  console.log(e);
               });

        }
    }

    angular
        .module('Marketing')
        .controller('ExportController', ExportController);
} 

我的营销服务

module Marketing.MarketingService {
    import IAjaxService = Common.IAjaxService;
    import AjaxServiceOptions = Common.ajaxService.AjaxServiceOptions;
    import IAjaxResponse = Common.IAjaxResponse;


    class MarketingService implements IMarketingService {
        constructor(
            private ajaxService: IAjaxService,
            private $translate: ng.translate.ITranslateService,
            private $q: ng.IQService) {
            this.$q = $q;
        }
        getRealCustomerInfo = (listNumber: number): ng.IPromise<ICustomerInfo[]> => {
            return this.ajaxService.makeAdminCall('marketingApi', 'getRealCustomerInfo', new AjaxServiceOptions({
                cache: false,
                defaultErrorMessage: 'Loading Customers failed'
            })).then((result: IAjaxResponse) => {
                if (result.data.isSuccessful)
                    return result.data.data;
            });
        }
    }

    service.$inject = ['ajaxService', '$translate', '$q'];

    function service(ajaxService, $translate, $q) {
        return new MarketingService(ajaxService, $translate, $q);
    }

    angular
        .module('Marketing')
        .service('marketingService', service);
}

界面

declare module Marketing {
    export interface ICustomerInfo {
        CustomerID: number;
        CustomerName: string;
        Phone: string;
        Phone2: string;
        MobilePhone: string;
        Email: string;
        MainAddress1: string;
        CustomerTypeID: number;
        CustomerTypeDescription: string;
        SponsorID: number;
        SponsorName: string;
        EnrollerID: number;
        EnrollerName: string;
        PriceTypeID: number;
        PriceTypeDescription: string
    }
    export interface IMarketingService {

        getRealCustomerInfo: (listNumber: number) => ng.IPromise<ICustomerInfo[]>;
    }
}

对我来说，它似乎无法在 Controller 中找到 this.marketingService.getRealCustomerInfo(this.listNumber) 函数。我已经被困了好几天了，仍然不知道为什么会发生。请帮忙，提前致谢。

Answer 1

我认为你的错误在于ExportController中的依赖注入(inject)。

您使用

static $inject = ['$stateParams', 'marketingService', '$scope'];

但是你的构造函数是

constructor(private marketingService: IMarketingService) { ... }

在这里，您的变量marketingService采用第一个依赖项$stateParams的值(它不包含您要调用的函数)。

您可以通过删除 $inject 语句中未使用的依赖项或根据注入(inject)完成构造函数来解决此问题。

友情提示:

在MarketingService中，

constructor(
    private ajaxService: IAjaxService,
    private $translate: ng.translate.ITranslateService,
    private $q: ng.IQService) {
    this.$q = $q;
}

您不需要this.$q = $q;。一旦您为构造函数参数指定了可见性(访问修饰符)，它将自动绑定(bind)到您的类(更多 here )。