我如何使用具有构造函数的参数打字稿类中定义一个AngularJS厂 [英] How can I define an AngularJS factory using TypeScript class that has constructor parameters

问题描述

我想写一个打字稿类，得到一个preFIX参数的构造，此类还需要访问一个LogService注入。

I want to write a TypeScript class that gets a "prefix" parameter in the constructor, this class also needs access to a LogService inject.

使用普通的JavaScript，你应该做的是这样的：

Using plain JavaScript you should do it like this:

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）：

So when you inject this factory to a controller, you can initiate it many times like this (No need to inject the LogService):

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

您将如何定义这个厂在打字稿类？
打字稿类不能内部函数定义...
此类应能够访问LogService，但它不能在其注入之一得到它。

How would you define this Factory in a TypeScript class? TypeScript classes can not be defined inside functions... This class should have access to the LogService, but it can't get it in one of the injects.

推荐答案

有至少2个选项。

第一个选项，有 LogWith prefixFactory 提供一种方法的getInstance ，返回prefixed记录仪

First option, have LogWithPrefixFactory provide a method getInstance that returns the prefixed logger.

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]);
}

可以在像控制器使用

Which can be used in the controller like:

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

完整plunker 这里。

Complete plunker here.

第二个选项（类似于另一个答案），给角另一个函数被用作构造函数，手动处理 LogService 构造器注入（个人而言，我不像静态）。

Second option (similar to another answer), give Angular another function to be used as a constructor, which handles manually the LogService constructor injection (personally, I don't like static).

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

可以在像控制器使用

Which can be used in the controller like:

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

甚至是：

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

LogWith prefixFactory 在控制器注入，但它不是打字稿类的构造函数，这是它返回类的实际实例的中间功能，它有后被手动注入了 LogService 。

LogWithPrefixFactory is injected in the controller but it's not the TypeScript class constructor, it's the intermediate function which returns the actual instance of the class, after it has been "manually" injected with LogService.

完整plunker 这里。

Complete plunker here.

请注意：这些plunkers同步编译浏览器打字稿。我只在Chrome进行了测试。没有保证，他们会工作。最后，我手动添加angular.d.ts的一小部分。完整的文件非常大，我的代理不允许大文章。

Note: These plunkers synchronously compile typescript on the browser. I have tested it only on Chrome. No guarantees that they'll work. Finally, I manually added a small part of angular.d.ts. Full file was very big and my proxy does not allow large POSTs.

这篇关于我如何使用具有构造函数的参数打字稿类中定义一个AngularJS厂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！