问题 如何以ES / ES6注入Angular类


使用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"]
    |  
              ^

2741
2017-07-25 14:55


起源



答案:


这是一个实验性的提议语法。在巴别塔,你必须启用 es7.classProperties。通过

optional: ['es7.classProperties']

巴贝尔确切的方法取决于您的转换方式。

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

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

15
2017-07-25 18:00



谢谢。这就是我所缺少的。我将以下内容添加到gulp中,现在可以正常工作了。 .transform(babelify.configure({ optional: ["es7.classProperties"] })) - Kip


答案:


这是一个实验性的提议语法。在巴别塔,你必须启用 es7.classProperties。通过

optional: ['es7.classProperties']

巴贝尔确切的方法取决于您的转换方式。

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

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

15
2017-07-25 18:00



谢谢。这就是我所缺少的。我将以下内容添加到gulp中,现在可以正常工作了。 .transform(babelify.configure({ optional: ["es7.classProperties"] })) - Kip


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

这是一个 链接回答 在另一个线程中,直接 链接到一个小提琴 用一个演示。


1
2018-05-20 14:02