http://kittencup.com/javascript/2015/11/11/%E5%9C%A8angular2%E6%9C%8D%E5%8A%A1%E4%B8%AD%E6%B3%A8%E5%85%A5%E6%9C%8D%E5%8A%A1.html
如果你关注我们的文章 Angular2中的依赖注入 ,你知道DI系统在Angular中是如果运作的，它利用在我们代码上通过注解添加metadata来获取所有关于依赖的信息来解决我们的依赖关系
Angular 2 应用基本上可以用任何语言编写。只要它以某种方式编译成JavaScript，当我们使用Typescript编写我们应用时，我们使用decorator来给我们代码添加metadata，有时，我们甚至忽略一些decorator，单纯依靠类型注释。然而，事实证明，当涉及到DI，我们可能注入依赖到服务时遇到意外的行为。
本文讨论了这个意外的问题，为什么它存在，以及如何解决。
注入服务依赖
比方说我们有一个简单的Angular 2 组件有一个DataService依赖，它可能是这个样子：
@ Component ({
selector : 'my-app'
})
@ View ({
directives : [ NgFor ],
template : `
< ul >
< li * ng - for = "#item in items" >< /li>
< /ul>
`
})
class AppComponent {
items : Array < any > ;
constructor ( dataService : DataService ) {
this . items = dataService . getItems ();
}
}
另一方面 DataService 是一个简单的类(因为它在Angualr2是一个服务)，它提供了一个方法返回一些items
class DataService {
items : Array < any > ;
constructor () {
this . items = [
{ name : 'Christoph Burgdorf' },
{ name : 'Pascal Precht' },
{ name : 'thoughtram' }
];
}
getItems () {
return this . items ;
}
}
当然，为了能使用DataService类型，我们必须为injector添加这个provider，当引导我们的应用时可以这样做，通过传递一个provider给boostrap();
bootstrap ( AppComponent , [ DataService ]);
到现在为止没有什么新的内容，如果这对你来说是新内容，你可能需要先阅读我们的 Angular2中的依赖注入 文章。
那么问题在那里呢？ 这个问题发生在当我们试图注入一个依赖进我们的服务，比如，我们可以使用Http在我们的DataService里从远程服务器获取数据，让我们快速实现这个。首先，我们需要为injector提供一个provider，让DataService知道有关http。
import { HTTP_PROVIDERS } from 'angular2/http' ;
...
bootstrap ( AppComponent , [ HTTP_PROVIDERS , DataService ]);
Angular http模块 暴露了 HTTP_PROVIDERS，它包含了所有的我们需要用到的http操作的provider，接下来，我们需要在我们的服务中注入这个实例
import { Http } from 'angular2/http' ;
class DataService {
items : Array < any > ;
constructor ( http : Http ) {
...
}
...
}
轰. 这个东西会爆炸。当我们在浏览器中运行这段代码，我们会得到以下错误：
Cannot resolve all parameters for DataService(?). Make sure they all have valid type or annotations.
这错误基本上的意思是，它不能解决DataService的Http依赖,因为Anuglar不知道该类型，因此 没有provider可以用来解决该依赖，恩。。等等，我们没有将变量类型提供给了constructor吗？
不，我们提供了，不幸的是，这是不够的，但是 在我们的AppComponent我们注入的DataService显然是在正常工作，那在这里有什么问题？
在我们的 Annotation和Decorator之间的区别 文章，我们获悉，decorator只是简单的为我们的代码添加metadata，我们来看下编译后的AppComponent的decorator
function AppComponent ( myService ) {
...
}
AppComponent = __decorate ([
Component ({...}),
View ({...}),
__metadata ( 'design:paramtypes' , [ DataService ])
], AppComponent );
我们可以清楚地看到,AppComponent类会被__decorate函数给包装,里面包装了Component，View 和 paramtypes的metadata,
paramtypes 元素是一个告诉angular DI用来弄清楚，它必须返回一个什么类型的实例
这看起来很不错。让我们来看看被编译后的DataService，看看在那里发生了什么事情（也简化了）。
DataService = ( function ( ) {
function DataService ( http ) {
...
}
return DataService ;
})();
哎呀。显然，在这里没有任何metadata。这是为什么？
当设置了emitDecoratorMetadata选项，TypeScript会生成metadata，然而，这并不意味着它会盲目的为我们代码的每个类或方法生成metadata，TypeScript只会对那些被decorator附加的类,方法,属性或者构造函数参数来生成相应的metadata ,否则，会产生大量的未使用的metadata代码，这不仅影响文件的大小，也对我们的应用程序运行产生影响。
这就是为什么AppComponent会生成metadata，而DataService 不生成，我们的AppComponent有一个decorator
强制生成metadata
那么我们如果才能强制TypeScript为我们生成metadata呢,我们可以做的一件事，就是用框架提供的Di decorator,正如我们在DI的其他文章中了解到，@Inject decorator用来要求某种类型的依赖
我们可以改变我们的DataService的成这样的：
import { Inject } from 'angular2/core' ;
import { Http } from 'angular2/http' ;
class DataService {
items : Array < any > ;
constructor ( @ Inject ( Http ) http : Http ) {
...
}
...
}
问题解决。事实上，如果查看经过编译后的代码时会发现已生成需要的metadata
function DataService ( http ) {
}
DataService = __decorate ([
__param ( 0 , angular2_1 . Inject ( Http )),
__metadata ( 'design:paramtypes' , [ Http ])
], DataService );
我们基本上可以在我们代码上做任何decorator，只要在class,或者构造函数参数上附加任何decorator，换一种说法，我们可以把 @Inject 移除，然后在这个类上使用别的decorator，因为这将导致TypeScript为构造函数参数生成metadata
当然。在一个类上使用一个decorator，来解决所有的问题，听起来不是很合适。幸运的是，我们可以使用Angular自带的另一个decorator。@Injectable 是一个用于Dart的metadata创建，在TypeScript,它没有任何特殊含义，然而，事实证明是非常适合我们的用例.
我们所要做的就是导入它，把它放在我们的DataService
import { Injectable } from 'angular2/core' ;
import { Http } from 'angular2/http' ;
@ Injectable ()
class DataService {
items : Array < any > ;
constructor ( http : Http ) {
...
}
...
}
同样，它只是强制TypeScript发射需要的matadata,这个decorator在这里并没有什么特殊含义，这似乎是我们目前解决所示问题的最佳选择
查看更多关于在angular2服务中注入服务的详细内容...