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) が undefined を返しています。問題は 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 に答える