Question

我想写一个TypeScript类，它获得一个＆＃34;前缀＆＃34;在构造函数中，该类还需要访问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

以下是实现此目的的一种方法：

class LogWithPrefixFactory {
    static LogService;
    constructor(prefix) {
        this.prefix = prefix;
    }

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

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


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

Rational：你实际上想要一个LogWithPrefixFactory中的静态属性（使用JS中的闭包），和你希望它来自Angular。

Answer 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");

完成plunker here。

第二个选项（类似于另一个答案），给Angular另一个函数用作构造函数，它手动处理LogService构造函数注入（个人而言，我不喜欢static）。 / p>

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类构造函数，它是在用“{1}}”“手动”注入后返回类的实际实例的中间函数。 / p>

完成plunker here。

注意：这些掠夺者在浏览器上同步编译typescript。我只在Chrome上测试过它。不保证他们会工作。最后，我手动添加了angular.d.ts的一小部分。完整文件非常大，我的代理不允许大型POST。

Answer 3

我的成就如下

module Dashboard {
    export class LayoutServiceFactory {
        static $inject = ["$q", "$http"];
        private q: ng.IQService;
        private http: ng.IHttpService;

        constructor(private $q: ng.IQService, private $http: ng.IHttpService) {
            this.q = $q;
            this.http = $http;
        }

        getDataFromServer(serviceUrl) {
            var deferred = this.q.defer();
            this.http.get(serviceUrl, null)
                .then(response => {

                    deferred.resolve((response) as any);

                });
            return deferred.promise;
        }

        static factory() {
            var instance = ($q: ng.IQService, $http: ng.IHttpService) =>
                new LayoutServiceFactory($q, $http);
            return instance;
        }
    }

    appModule.factory("LayoutService", LayoutServiceFactory.factory());
}

Answer 4

这对我有用。

    namespace Services
    {
      export class MyService
      {
        constructor( protected $someService :any )
        {
          return this;
        }
      }
    }
    angular.module( 'myModule', [] ).factory( Services );

Answer 5

这就是我的工作方式

SHAPING = {
 u'\u0621' : ( u'\uFE80' ) ,
 u'\u0622' : ( u'\uFE81', u'\uFE82' ) ,
 u'\u0623' : ( u'\uFE83', u'\uFE84' ) ,
 u'\u0624' : ( u'\uFE85' , u'\uFE86' ) ,
 u'\u0625' : ( u'\uFE87' , u'\uFE88' ) ,
 u'\u0626' : ( u'\uFE89' , u'\uFE8B' , u'\uFE8C' , u'\uFE8A' ) ,
 u'\u0627' : ( u'\uFE8D' , u'\uFE8E' ) ,
 u'\u0628' : ( u'\uFE8F' , u'\uFE91' , u'\uFE92' , u'\uFE90' ) ,
 u'\u0629' : ( u'\uFE93' , u'\uFE94' ) ,
 u'\u062A' : ( u'\uFE95' , u'\uFE97' , u'\uFE98' , u'\uFE96' ) ,
 u'\u062B' : ( u'\uFE99' , u'\uFE9B' , u'\uFE9C' , u'\uFE9A' ) ,
 u'\u062C' : ( u'\uFE9D' , u'\uFE9F' , u'\uFEA0', u'\uFE9E' ) ,
 u'\u062D' : ( u'\uFEA1' , u'\uFEA3' , u'\uFEA4' , u'\uFEA2' ) ,
 u'\u062E' : ( u'\uFEA5' , u'\uFEA7' , u'\uFEA8' , u'\uFEA6' ) ,
 u'\u062F' : ( u'\uFEA9' , u'\uFEAA' ) ,
 u'\u0630' : ( u'\uFEAB'  , u'\uFEAC' ) ,
 u'\u0631' : ( u'\uFEAD' , u'\uFEAE' ) ,
 u'\u0632' : ( u'\uFEAF'  , u'\uFEB0' ) ,
 u'\u0633' : ( u'\uFEB1' , u'\uFEB3' , u'\uFEB4' , u'\uFEB2' ) ,
 u'\u0634' : ( u'\uFEB5' , u'\uFEB7' , u'\uFEB8' , u'\uFEB6' ) ,
 u'\u0635' : ( u'\uFEB9' , u'\uFEBB' , u'\uFEBC' , u'\uFEBA' ) ,
 u'\u0636' : ( u'\uFEBD' , u'\uFEBF' , u'\uFEC0' , u'\uFEBE' ) ,
 u'\u0637' : ( u'\uFEC1' , u'\uFEC3' , u'\uFEC4' , u'\uFEC2' ) ,
 u'\u0638' : ( u'\uFEC5' , u'\uFEC7' , u'\uFEC8' , u'\uFEC6' ) ,
 u'\u0639' : ( u'\uFEC9' , u'\uFECB' , u'\uFECC' , u'\uFECA' ) ,
 u'\u063A' : ( u'\uFECD' , u'\uFECF' , u'\uFED0', u'\uFECE' ) ,
 u'\u0640' : ( u'\u0640' ) ,
 u'\u0641' : ( u'\uFED1' , u'\uFED3' , u'\uFED4' , u'\uFED2' ) ,
 u'\u0642' : ( u'\uFED5' , u'\uFED7' , u'\uFED8' , u'\uFED6' ) ,
 u'\u0643' : ( u'\uFED9' , u'\uFEDB' , u'\uFEDC' , u'\uFEDA' ) ,
 u'\u0644' : ( u'\uFEDD' , u'\uFEDF' , u'\uFEE0', u'\uFEDE' ) ,
 u'\u0645' : ( u'\uFEE1' , u'\uFEE3' , u'\uFEE4' , u'\uFEE2' ) ,
 u'\u0646' : ( u'\uFEE5' , u'\uFEE7' , u'\uFEE8' , u'\uFEE6' ) ,
 u'\u0647' : ( u'\uFEE9' , u'\uFEEB' , u'\uFEEC' , u'\uFEEA' ) ,
 u'\u0648' : ( u'\uFEED' , u'\uFEEE' ) ,
 u'\u0649' : ( u'\uFEEF' , u'\uFEF0' ) ,
 u'\u064A' : ( u'\uFEF1' , u'\uFEF3' , u'\uFEF4' , u'\uFEF2' )
}

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

5 个答案: