Question

我正在使用angular，jspm和es6。我正在使用基类将依赖项注入构造函数并自动在“this”上注册自己。

这实际上是扩展基本组件类时React中存在的模式。我在这里找到了这个人的小捷径方法：http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes

我正在寻找一种方法来使用Angular，使用es6类将注入的依赖项绑定到构造函数的“this”。

class baseClass {
    constructor(...injections) {
        this._bind(injections)
    }

    _bind(injections) {
        injections.forEach( (injection) => { 
            this[injection.name] = injection;
        });
    }   
}

class DiClass extends baseClass {
    constructor($q, SomeAngularFactory) {
        super($q, SomeAngularFactory);
    }
}

这显然不起作用（注射名称不是一个东西，我知道）......但它几乎可以。我的问题是如何获得注入函数或对象的“名称”。在这个例子中，_bind函数只给你原始对象或函数...我不知道如何将“$ q”或“SomeAngularFactory”作为字符串。

可以通过使用“Object.getOwnPropertyNames（... injections）”获得它，但不能在_bind函数中获取。

感谢您提供的任何反馈或想法。

Answer 1

你可以这样做：

class baseClass {
  constructor(injections) {
    Object.assign(this, injections);
  }
}

class DiClass extends baseClass {
  constructor($q, SomeAngularFactory) {
    super({ $q, SomeAngularFactory });
  }
}

Obs。：与类类似，Object.assign是一个ES2015特性，它将第二个（参数）对象合并到第一个。

Answer 2

在AngularJS中，这个可注入的参数仅适用于开发模式。如果您去生产并缩小脚本，所有注射剂都应保存到特殊属性中。您可以在angular docs中了解有关它的更多信息。这里它如何与角度控制器一起使用

function MyController($q, SomeAngularFactory) {
}
MyController.$inject = ['$q', 'SomeAngularFactory']

Angular 2.0将由TypeScript和will use annotations提供支持，以描述可注入变量。目前在anguar 1.3中，您仍然可以添加静态属性$inject

class DiClass extends baseClass {
   constructor($q, SomeAngularFactory) {
     super($q, SomeAngularFactory);
   }
}
DiClass.$inject = ['$q', 'SomeAngularFactory'];

Answer 3

Angular有一个内置方法$injector.annotate(fn)，它用于依赖注入，它允许你获取传递给它的函数的参数。您可以利用它来获取所有constructor()参数的名称，然后使用$injector.get()来检索它们（这应该是性能良好的，因为它们是高速缓存的）。

这是另一个帖子中的link to answer，以及带演示的直接link to a fiddle。

es6扩展运算符与构造函数

3 个答案: