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，则可以通过在构造函数参数上使用访问修饰符来保存一些样板文件。 E.g：

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

...这是简写：

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

编辑2：
如果你想让你的控制器缩小友好，你可以使用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() {...} }

打字稿

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

Answer 2

该类应具有明确的$inject注释，以便适当缩小：

class HomeCtrl {
    static get $inject() {
        return ['$http'];
    }
    // or unstandardized shortcut:
    // static $inject = ['$http'];

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

    doMe() {
         this.$http...
    }
}

Answer 3

最后，我做了：

.controller('LoginCtrl', function ($scope, $rootScope) {
    $scope.signWithFackBook = function () {
        $rootScope.client.login('facebook').then(function () {

            alert('Login successfully!');
        }, function (error) {
            console.error(error);
            alert('Failed to login!');
        });
    }
})

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

3 个答案: