从源码角度深入解析Angular @Injectable注解的核心工作原理

正文

首先，让我们观察两个来自 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 http: Http) {
    // use `this.http` which is the Http provider
  }
}

这里 private http: 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 背后最核心的工作原理。