正文
首先，让我们观察两个来自 SAP 电商云 Spartacus UI 的 Angular 服务类。这两个类都添加了 @Injectable 装饰器，唯一的区别在于是否包含 providedIn 参数：
@Injectable() 装饰器
@Injectable() 装饰器的作用非常明确——它告诉 Angular：这个类可以被纳入依赖注入系统。换句话说，这是让服务具备“可注入”能力的关键入口。
如果加上 providedIn: 'root'，就表示该服务在整个应用范围内都是可见的，任何组件或其他服务都可以直接请求它，而无需在模块中手动注册。
那么，当我们在组件中需要使用某个服务时，Angular 是如何知道要注入哪个实例的呢？答案隐藏在构造函数的参数类型里。来看一个典型例子：
import { Component } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'example-component',
template: 'I am a component
'
})
class ExampleComponent {
constructor(private https: Http) {
// use `this.http` which is the Http provider
}
}
这里 private https: Http 的类型是 Http（注意大写 H），Angular 会自动将它匹配到对应的服务实例。听起来很神奇？对于 JavaScript 开发者来说，这确实有点“黑魔法”的味道。
浏览器运行时，http 参数从哪来？
要知道，类型定义是 TypeScript 特有的特性，编译成 JavaScript 后按理说应该消失得无影无踪。那么浏览器中的 JavaScript 凭什么还能认出 http 参数该是什么？
秘密藏在 tsconfig.json 里的一个配置：emitDecoratorMetadata 设为 true。这个开关会把参数的类型信息作为元数据，嵌入到编译后的装饰器代码里。来看上面那段 TypeScript 编译后实际的样子（为了清晰，保留了 ES6 导入）：
import { Component } from '@angular/core';
import { Http } from '@angular/http';
var ExampleComponent = (function() {
function ExampleComponent(http) {
this.http = http;
}
return ExampleComponent;
})();
ExampleComponent = __decorate(
[
Component({
selector: 'example-component',
template: 'I am a component
',
}),
__metadata('design:paramtypes', [Http]),
],
ExampleComponent
);
发现关键点了吗？__metadata('design:paramtypes', [Http]) 这一行把 Http 类型存储为元数据。因此 @Component 装饰器在运行时会被转换成普通的 ES5 函数，而 __decorate 负责把元数据打包在一起。Angular 拿到这个元数据后，就知道构造函数的第一参数应该注入 Http 令牌对应的实例，然后把它赋值给 this.http：
function ExampleComponent(http) {
this.http = http;
}
整个过程环环相扣：TypeScript 的类型信息通过 emitDecoratorMetadata 保留下来，装饰器元数据告诉 Angular 该注入什么，最终依赖注入系统优雅地完成了服务的装配。这就是 @Injectable 背后最核心的工作原理。
