从 ES6 class 方法调用 angular 服务

Question

（我使用 Babel 才能使用 ES6）

当我调用 addConfigurationToCart() 时，我得到：

ReferenceError: Order is not defined.

但在构造函数中我没有。这是为什么？如果我将 Order 作为参数添加到 addConfigurationToCart

，我会得到同样的错误

class ConfigCtrl {
    constructor($state, api, Order) {
        this.current = Order.current;
    }

    addConfigurationToCart() {
        Order.saveConfiguration();
        $state.go('order');
    }
}

Answer 1

您必须为 class 的其余部分提供服务 public。

class ConfigCtrl {
  constructor($state, api, Order) {
      ...
      this.Order = Order;
  }

  addConfigurationToCart() {
      this.Order.saveConfiguration();
      ...
  }
}

Answer 2

constructor 和 addConfigurationToCart 函数有不同的作用域（在 JS 意义上），当然，一个作用域中的变量在另一个作用域中不可用，除非变量被分配给 this 属性或来自父作用域的变量。

私有变量在 ES2015+ 中仍然不存在，但是 some workarounds 可以做到这一点。

最明显的方法是使用局部变量：

let $state, api, Order;

class ConfigCtrl {
  static $inject = ['$state', 'api', 'Order'];

  constructor(...args) {
    [$state, api, Order] = [...args];
    // ...
  }

  addConfigurationToCart() {
    Order.saveConfiguration();
    // ...
  }
}

以及在 class 中成功提供私有变量的更多惯用方法：

const [$state, api, Order] = [Symbol(), Symbol(), Symbol()];

class ConfigCtrl {
  static $inject = ['$state', 'api', 'Order'];

  constructor(...args) {
    [$state, api, Order].forEach((v, i) => this[v] = args[i]);
    // ...
  }

  addConfigurationToCart() {
    this[Order].saveConfiguration();
    // ...
  }
}

Answer 3

controller: class {
    constructor($http, Restangular, $state) {
        Object.assign(this, {$http, Restangular, $state});
    }
    doIt() {
       // use this.$http, this.Restangular & this.$state freely here
    }
}

从 ES6 class 方法调用 angular 服务

Calling angular service from ES6 class method

angularjs

ecmascript-6

babeljs