ES6类和Babel的角度服务

Question

我正在尝试使用ES6类作为Angular服务,但是当它被实例化时,方法无法访问构造函数变量.

class dataWrapperService {

    constructor($q, $log) {
        this.$q = $q;
        this.$log = $log;
    }

    data() {
        console.log(this.$q);
    }
}

dataWrapperService.$inject = ['$q', '$log'];

app.service('dataWrapper', dataWrapperService);

一旦服务被Angular注入并且我在其上调用data方法,该方法就无法访问构造函数值.

// calling the data method results in an error
dataWrapper.data();   //TypeError: Cannot read property '$q' of undefined

//  console.log output of dataWrapper:
Object
  $log: Object
  $q: Q(resolver)
  __proto__: smDataWrapperService
    constructor: smDataWrapperService($q, $log)
    data: data()
    __proto__: Object

但...

我可以新手动dataWrapperService和工作得很好.

var dataWrapper = new smDataWrapperService("hello", "sir");
dataWrapper.data();   // "hello"

我在这里错过了什么？

更新:

---

这似乎只发生在promise回调中:

我通常将函数传递给then/catch,如下所示:

$http.get('whatever').then(dataWrapper.data);

但只有以下内容才有效:

$http.get('whatever').then((response) => smDataWrapper.data(response))

Answer 1

Angular 需要一个函数app.factory('dataWrapper', dataWrapperService);而不是一个类。

您可以将静态工厂方法添加到您的类中，并将其添加到app.factory. （请参阅下面的更新代码片段）

像这样的代码应该可以工作：

class dataWrapperService {

    constructor($q, $log) {
        this.$q = $q;
        this.$log = $log;
    }

    data() {
        console.log(this.$q);
    }

    static dataWrapperFactory($q, $log) {
        dataWrapperService.instance = new dataWrapperService($q, $log);
        return dataWrapperService.instance;
    }
}

dataWrapperService.$inject = ['$q', '$log'];

app.factory('dataWrapper', dataWrapperService.dataWrapperFactory);

更新

正如评论中提到的，你的代码应该可以工作，因为 ES6 类是一个构造函数，这就是所angular.service期望的。

我稍后会检查您的代码是否存在任何其他问题。