0

我正在使用 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) 返回未定义。我怀疑问题出在我的 webpack 代码和 ng-annotate 上，但我可以看到生成的包包含注释：

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
4

1 回答 1

0

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

import templateUrl from './indicatorSelector.html';

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

但是，让它与类表达式一起工作会很有趣......

于 2016-11-27T17:03:36.180 回答