如何以ES / ES6注入Angular类

时间:2015-07-25 14:55:46

标签: angularjs dependency-injection ecmascript-6

将Angular 1.4与ES6 / 7和Babel结合使用,我可以在类块之后使用此代码将参数成功注入到名为Controller的类中:

class Controller {
    constructor($scope, $state, $window) {...}
    ...
}
Controller.$inject = ["$scope", "$state", "$window"]

但是,在构造函数的正上方看到注入参数会更清晰。我见过其他人使用静态$ inject,但是我收到错误。以下是我尝试的内容:

class Controller {
    static $inject = ["$scope", "$state", "$window"]
    constructor($scope, $state, $window) {...}
    ...
}

为什么会导致此错误?它似乎适用于其他人。

Unexpected token (2:11)
  1 | class Controller {
  2 |     static $inject = ["$scope", "$state", "$window"]
    |  
              ^

2 个答案:

答案 0 :(得分:15)

这是一个实验性的提议语法。在Babel中,您必须启用es7.classProperties。通

optional: ['es7.classProperties']
巴贝尔。确切的方法取决于您的转换方式。

如果你想做标准的ES6,你也可以做

static get $inject(){ return ["$scope", "$state", "$window"]; }

答案 1 :(得分:1)

另一种方法是使用$injector.annotate(fn),Angular用于依赖注入,并允许您获取传递给它的函数的参数。您可以利用它来获取所有constructor()参数的名称,并使用$injector.get()检索它们。

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