如何使用具有构造函数参数的TypeScript类定义AngularJS工厂

Question

我想编写一个在构造函数中获取“前缀”参数的TypeScript类，该类还需要访问LogService注入。

使用纯JavaScript，您应该这样做：

angular.module('myModule', []).factory('LogWithPrefixFactory', ['LogService', function(LogService) {
    var LogWithPrefixFactory = function(prefix) {
        this.prefix = prefix;
    }

    LogWithPrefixFactory.prototype.log = function(txt) {
        // we have access to the injected LogService
        LogService.log(this.prefix, txt);
    }

    return LogWithPrefixFactory;
}]);

因此，当您将此工厂注入控制器时，可以像这样多次启动它（无需注入LogService）：

angular.module('myModule').controller('Ctrl', function(LogWithPrefixFactory) {
    var foo = new LogWithPrefixFactory("My PREFIX");
    var foo = new LogWithPrefixFactory("My OTHER PREFIX");
}

您将如何在TypeScript类中定义此Factory？无法在函数内部定义TypeScript类。此类应有权访问LogService，但不能通过注入之一获取它。

Answer 1

至少有2个选项。

第一个选择是，LogWithPrefixFactory提供一种getInstance返回前缀记录器的方法。

module services {
  class LogService {
    $window: any;

    constructor($window: any) {
      this.$window = $window;
    }

    log(prefix: string, txt: string) {
      this.$window.alert(prefix + ' :: ' + txt);
    }
  }
  angular.module('services').service('LogService', ['$window', LogService]);


  export interface ILog {
    log: (txt) => void;
  }

  export class LogWithPrefixFactory {
    logService: LogService;

    constructor(logService: LogService) {
      this.logService = logService;
    }

    getInstance(prefix: string): ILog {
      return {
        log: (txt: string) => this.logService.log(prefix, txt);
      }
    }
  }

  angular.module('services').service('LogWithPrefixFactory', ['LogService', services.LogWithPrefixFactory]);
}

可以在控制器中使用，例如：

this.log1 = logWithPrefixFactory.getInstance("prefix1");
this.log2 = logWithPrefixFactory.getInstance("prefix2");

在这里完整地塞一下。

第二个选项（类似于另一个答案），为Angular提供了另一个要用作构造函数的函数，该函数手动处理LogService构造函数注入（个人而言，我不喜欢static）。

angular.module('services').service('LogWithPrefixFactory', ['LogService', function(logService) {
    return function LogWithPrefixFactory(prefix) {
      return new LogWithPrefix(prefix, logService);
    };
}]);

可以在控制器中使用，例如：

this.log1 = new LogWithPrefixFactory("prefix1");
this.log2 = new LogWithPrefixFactory("prefix2");

甚至：

this.log1 = LogWithPrefixFactory("prefix1");
this.log2 = LogWithPrefixFactory("prefix2");

LogWithPrefixFactory被注入到控制器中，但不是TypeScript类的构造函数，它是中间函数，在“手动”注入后，该函数返回该类的实际实例LogService。

在这里完整地塞一下。

注意：这些插件会在浏览器上同步编译打字稿。我只在Chrome上测试过。不能保证它们会起作用。最后，我手动添加了一小部分angular.d.ts。完整文件非常大，我的代理服务器不允许大型POST。