Question

我试图弄清楚如何在现有的Angular 1.5应用中使用TypeScript。我无法弄清楚如何注入自定义服务。角度服务和第三方服务工作正常。我需要注入的服务仍然是vanilla JS服务。在下面的示例中，我需要注入reportService。

我得到的错误是getReportById不是函数。

class ReportController implements IReportController {

    static $inject = ['$stateParams', 'reportService'];


    constructor(private $stateParams: angular.ui.IStateParamsService, private reportService) {

        this.getReport($stateParams.id);
    }

    getReport(id: number): object {
        reportService.getReportById(id)
            .then(function(res) {
                console.log(res)
            });
    }

}

这是服务。

angular.module('reportsServiceModule', [])
    .factory('reportsService', [
        '$http',
        reportsService
    ]);

function reportsService(
        $http
) {

    'use strict';

    var service = {};

    service.getReportById = function(reportID) {
        return 'A promise';
    };

    return service;
}

Answer 1

AngularJS中JS和TS开发之间唯一真正的区别是可以输入单位。除了类型安全之外，这不会影响任何事情。

这将是

interface IReportService {
 getReportById: (someType) => string;
}

...
constructor(
  private $stateParams: angular.ui.IStateParamsService,
  private reportService: IReportService
) {
...

依赖注入没有问题。如果您在Angular中遇到DI问题，则会从进样器中收到错误。

这里真正的问题是不使用严格模式。使用use strict语句或alwaysStrict TS option错误会显示错误的原因 - reportService方法中未定义getReport变量。

相反，它应该是

getReport(id: number): object {
    this.reportService.getReportById(id)
    ...

Answer 2

这是一个错字。

您定义了报告 s 服务

.factory（ 'reportsService'）

但注入了另一个

static $ inject = ['$ stateParams'，'reportService'];

使用JavaScript和TypeScript进行Angular 1依赖注入

2 个答案: