angularjs - 如何在组件的类定义中注入(inject)依赖项？

Question

我有这个类定义的组件(稍后由 webpack 和 babel 转译回 ES5)。我需要在其中一种方法中使用 $http 服务。我怎么做？我在哪里注入(inject) $http 作为依赖项？如果我在构造函数参数中这样做，我会得到一个错误，就好像我根本没有注入(inject)它一样。也许上课不是去这里的路？

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

Answer 1

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

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

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:
如果你想让你的 Controller 对缩小友好，你可以使用描述的选项之一 here (可能与 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() {...}
}

typescript

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

  doMe() {...}
}