AngularJS（1.5）依赖注入模型类（打字稿）

Posted 2023-03-13

【中文标题】AngularJS（1.5）依赖注入模型类（打字稿）

【英文标题】：AngularJS (1.5) dependency injection into models classes (typescript)

【发布时间】：2016-10-26 07:58:58

【问题描述】：

我正在尝试使用 typescript 来构建一个 angularjs (1.5) 应用程序。

我想制作一个调用模型（可以接受参数）的工厂。

如果我用纯 JS 来做，我可以做到以下几点

angular.module('test', [])
    .factory('Talker', [$q, function($q)
      return Talker()

      function Talker(name) 
        this.name = name || 'Bobuel Johnson'; 
      
      Talker.prototype.deferredHello = function()
        $q.when('Hi, I\'m ' + this.name);
      
    ])

现在我想在 typescript 中执行此操作，这样我就可以拥有 Talker 类，但我希望能够将（在这种情况下）$q 注入模型类。

拜托，你能帮我弄清楚如何将它设置为等效的打字稿吗？

【参考方案1】：

我建议使用 service 配方而不是 factory，如果只是为 angular2 做准备。对该 js 代码的 TypeScript 重写看起来像这样。

class Talker 
  public static $inject = ['$q']; // configure angular di
  private name: string = 'Some talker';  

  constructor(private $q) 

  public deferredHello() 
    this.$q.when('Hi, I\'m ' + this.name);
  


angular.module('test').service('Talker', Talker);

你可以找到翻译成js的here。

如果绝对需要工厂，您应该也可以这样做：

class Talker 

  private name: string = 'Some talker';

  constructor(private $q) 

  public deferredHello() 
    this.$q.when('Hi, I\'m ' + this.name);
  


angular.module('test').service('Talker', function($q) 
  return new Talker($q);
);

你可以查看生成的javascripthere。

如果您需要创建多个 Talker 实例，您可以这样做。

class Talker 

  private name: string = 'Some talker';

  constructor(private $q, money: number) 

  public deferredHello() 
    this.$q.when('Hi, I\'m ' + this.name);
  


angular.module('test').service('Talker', function($q) 
  // we can ask for more parameters if needed
  return function talkerFactory(money)  // return a factory instead of a new talker

    return new Talker($q, money);
  ;

);

angular.module('yatest').service('Organiser', function(Talker) 
  let talker = Talker(42); // will call talkerFactory and return a new instance of talker 
)

例如here。

【讨论】：

感谢您的建议！我不太确定如何将模型作为服务提供，因为该服务是单例的，并且我需要模型的多个实例，此外，如果我想在实例化时为其提供参数，Talker 模型会出现问题。您建议我使用您提到的工厂版本还是有更好的方法？

有一种从服务创建多个实例的模式，您可以使用它，只需返回一个函数，该函数在调用时将返回该类的新实例。我也会为此添加一个示例。 github.com/angular/angular.js/issues/2708

聚会有点晚了，但这个答案应该被标记为有效！

@timothy.B 感谢您的评论，但如果答案是他的问题的解决方案，这真的取决于 OP。希望对你有所帮助。