Angular2 如何管理依赖注入?

Mil*_*uzz 5 javascript typescript angular

我知道要将依赖项注入 Angular2 组件,我只需在其构造函数中注释一个参数,就像这里的 ThingService. 我想了解的是 Angular 如何知道在运行时注入什么,据我所知,这只是 TypeScript 注释,在运行时没有任何意义。管理哪些提供者放置在组件构造函数中的位置的低级内部机制是什么。如果你自己推出这个系统,它会如何工作。这是我不理解的打字稿机制吗?

@Component({
  selector: 'app-thing',
  templateUrl: './thing.component.html',
  styleUrls: ['./thing.component.scss']
})
export class ThingComponent {

  constructor(
    private thingService: ThingService) {
  }
}
Run Code Online (Sandbox Code Playgroud)

Pas*_*cht 5

在幕后发生的是 TypeScript 保留生成的 ES5 代码中的元数据。所以构造函数中的注释实际上并没有消失,它在运行时可用,然后 Angular 的 DI 可以从那里获取它。

如果满足以下要求,TypeScript 始终会保留该元数据:

  1. 编译器选项属性 -emitDecoratorMetadataexperimentalDecorators- 都需要设置为true
  2. 类上必须至少有一个装饰器(这就是某些服务类使用@Injectable()装饰器的原因,否则不会发出其依赖项的元数据)

我已经写了深入的文章关于该主题在这里


eko*_*eko 2

如果我理解正确的话,你是在要求一个更理论的(ts 后面的 js)答案。

根据我读过的内容;Angular2 注入系统创建该提供程序对象/函数的实例,并在您像在构造函数中那样定义它时在该组件中使用该实例。如果您没有在正在使用的组件中提供它,那么它将转到它的父组件,直到它所使用的模块。每个级别都有自己的提供程序实例映射,并且组件将使用向上遍历注入树时找到的第一个实例。

因此,提供者在定义之前将是一个单例实例。