在Angular 1.X上，注入不能使用ng-annotate和babel

Question

我正在使用ES6代码样式并实现一个示例模块，如下所示：

import angular from 'angular';
import { IndicatorSelectorComponent } from './indicatorSelector.component';
import './indicatorSelector.css';

export const IndicatorSelectorModule = angular
  .module('indicatorSelector', [])
  .component('indicatorSelector', IndicatorSelectorComponent)
  .name;

使用该组件的以下代码：

import templateUrl from './indicatorSelector.html';

export const IndicatorSelectorComponent = {
  templateUrl,
  controller: class IndicatorSelectorComponent {
    contructor($http) {
      'ngInject';
      this.$http = $http;
    }

    $onInit() {
      console.log(this.$http);
    }
  }
}

console.log(this.$http)返回undefined。我怀疑问题出在我的webpack代码和ng-annotate上，但我可以看到生成的bunddle包含了注释：

var IndicatorSelectorComponent = exports.IndicatorSelectorComponent = {
  templateUrl: _indicatorSelector2.default,
  controller: function () {
    function IndicatorSelectorComponent() {
      _classCallCheck(this, IndicatorSelectorComponent);
    }

    _createClass(IndicatorSelectorComponent, [{
      key: 'contructor',
      value: ["$http", function contructor($http) { // <==== HERE!
        'ngInject';

        this.$http = $http;
      }]
    }, {
      key: '$onInit',
      value: function $onInit() {
        console.log(this.$http);
      }
    }]);

    return IndicatorSelectorComponent;
  }()
};

但它仍然不起作用。我试图检查模块代码中的一个console.log(IndicatorSelectorComponent)；

我可以看到$inject是空的。我不知道还能做什么。我很感谢在这方面的任何帮助。

Object
controller :function IndicatorSelectorComponent()
$inject :Array[0]
arguments : (...)
caller : (...)
length : 0
name : "IndicatorSelectorComponent"
prototype : Object
__proto__ : function ()
[[FunctionLocation]] : indicatorSelector.component.js:5
[[Scopes]] : Scopes[3]
templateUrl : "C:/Projetos/IndicadoresPCM/client/src/app/components/goals/indicatorSelector/indicatorSelector.html"
__proto__ : Object

Answer 1

如果使用这种方式，它将会工作。

import templateUrl from './indicatorSelector.html';

export const IndicatorSelectorComponent = {
  templateUrl,
  controller: function ($http) {
    "ngInject";
    this.$onInit = function () {
      console.log($http);
    };
  }
}

但是，让它与类表达式一起工作仍然是非常有趣的。