将模块注入服务 AngularJS ES6

Question

我是 Angular 内 ES6 语法的新手。我正在尝试创建服务并使用 $http 和 LocalStorageModule

当我尝试将这两个模块注入我的服务时，我收到关于我的语法未处于严格模式的错误。我做错了什么？

services/auth.js

export default class {

  constructor($http, localStorageService) {
    this.$http = $http;
    this.localStorageService = localStorageService;
  }
}

services/index.js

import angular from 'angular';

import auth from './auth';

export default angular
  .module( 'app.services', [] )
  .service( 'Authentication', auth )
  .name;

使用 Angular 1.4.5

Answer 1

我能够通过在构造函数中使用 'ngInject'; 来解决它。

我认为它不起作用，因为当 'ngInject' 让 Babel 转译器知道如何处理此注入时

export default class {

  constructor($http, localStorageService) {
    'ngInject';
    this.$http = $http;
    this.localStorageService = localStorageService;
  }
}

Answer 2

要正确实现这一点，不依赖转译器，只需将静态 getter 添加到您的 class，就像这样...

export class {
  constructor($http, localStorageService) {
    // Store references to the $http and localStorageService providers
    this.$http = $http;
    this.localStorageService = localStorageService;
  }

  static get $inject() {
    return ['$http', 'localStorageService'];
  }
}

AngularJS 将在给定的 class 上确认 $inject 属性并相应地处理您的依赖注入。

$inject: https://docs.angularjs.org/guide/di/#-inject-property-annotation

将模块注入服务 AngularJS ES6

Injecting modules into service AngularJS ES6

angularjs

ecmascript-6

angularjs-service