注射不NG-註釋和巴貝爾對角1.X

工作我使用ES6 codestyle和實施一個模塊的例子是這樣的：注射不NG-註釋和巴貝爾對角1.X

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-註釋，但我可以看到生成的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

來源

2016-11-27 rafrcruz

產生的代碼沒有任何意義。 ng-annotate使'constructor'成爲一個數組。雖然它當然不應該。顯然，它與Babel的輸出效果不佳。這可能是由於控制器是類表達式而不是聲明造成的。標題不反映案件。問題不是ES6。它是ng-annotate/Babel關係，並且「注射不工作」是結果。 – estus

謝謝你的回覆。有關我如何處理它的任何建議？我遵循這個風格指南https://github.com/toddmotto/angular-styleguide，所以它似乎爲某人工作，但我搜索了其他人面臨這個問題，並沒有解決方案，用這種方式，出現了。我可以做什麼或測試什麼？ – rafrcruz

嘗試將控制器移至類定義而不是類表達式。另請參閱https://github.com/olov/ng-annotate/issues/245。如果它不起作用，我會建議轉儲ng-annotate。說實話，它總是一種黑客。 – estus

如果使用這種方式，它將起作用。

import templateUrl from './indicatorSelector.html'; 

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

但仍然將是非常有趣的，以使之與類表達式工作...

來源

2016-11-27 17:03:36 rafrcruz

注射不NG-註釋和巴貝爾對角1.X

回答

相關問題