如何在组件的类定义中注入依赖项？

Question

我有这个类定义的组件（稍后由webpack和babel转换回ES5）。我需要在其中一种方法中使用$ http服务。我怎么做？我应该在哪里注入$ http作为依赖项？如果在构造函数参数中执行此操作，则会收到错误消息，好像根本没有注入它一样。也许上课不是去这里的方法吗？

angular.module('myApp').component('home', {
    template: require('./home.component.html'),
    controller: class HomeCtrl {
        constructor() {
        }
        doMe() {
            $http.get('http://www.yahoo.com/');
        }
    }
});

Answer 1

ES2015类（或转译类）只是原型继承上的语法糖。这意味着将您定义的方法放在“类”的原型上。为了能够访问构造函数中注入的依赖项，您需要以某种方式存储它们，以供原型方法以后引用。

通常通过将它们放在实例上来完成：

function HomeController($http) {
  this.$http = $http;
}
HomeController.prototype.doMe = function() {
  this.$http.get('http://www.yahoo.com/');
};

在基于类的语法中，它转换为：

class HomeController {
  constructor($http) {
    this.$http = $http;
  }

  doMe() {
    this.$http.get('http://www.yahoo.com/');
  }
}

编辑：
如果您正在使用TypeScript，则可以通过使用构造函数参数上的访问修饰符来保存一些样板。例如：

class HomeController {
  constructor(private $http) {}
}

...的简写：

class HomeController {
  private $http;

  contructor($http) {
    this.$http = $http;
  }
}

编辑2：
如果您想使控制器变得友好友好，可以使用此处描述的选项之一（可能与ngAnnotate之类的工具一起使用）。例如，这是您可以使用“ $inject属性注释”方法的方式：

ES5

HomeController.$inject = ['$http'];
function HomeController($http) {...}
HomeController.prototype.doMe = function() {...}

ES2015

class HomeController {
  constructor($http) {...}

  doMe() {...}
}
HomeController.$inject = ['$http'];

// OR

class HomeController {
  static get $inject() { return ['$http']; }
  constructor($http) {...}

  doMe() {...}
}

打字稿

class HomeController {
  static $inject = ['$http'];
  constructor(private $http) {}

  doMe() {...}
}