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

我有这个类定义的组件（之后由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/'); 
     } 
    } 
});

来源

2016-12-16 alexk

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：
如果你想使你的控制器缩小友好的，你可以使用一个选项描述为here（可能还有一个工具，如）。例如，这你怎么可以用 “$inject属性注释” 的方法：

ES5

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

ES2015

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

// OR 

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

    doMe() {...} 
}

打字稿

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

    doMe() {...} 
}

来源

2016-12-16 08:28:41 gkalpak

'静态$注射= '$ HTTP']'可以也被添加。 – estus

我没有得到您的评论@estus：哪里可以完全添加？ – alexk

@alexk在控制器类中。课程需要注明才能正确缩小。 – estus

类应该有明确的$inject注释，以便正确地精缩到：

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

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

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

来源

2016-12-16 10:57:53 estus

最后，我所做的：

controller: class { 
    constructor($http, Restangular, $state) { 
     Object.assign(this, {$http, Restangular, $state}); 
    } 
    doMe() { 
     // use this.$http, this.Restangular & this.$state freely here 
    } 
}

来源

2016-12-19 10:07:54 alexk

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

回答

相关问题