Angular2如何管理依赖注入?

时间:2017-01-17 11:25:31

标签: javascript angular typescript

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

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

  constructor(
    private thingService: ThingService) {
  }
}

2 个答案:

答案 0 :(得分:4)

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

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

  1. 编译器选项属性 - emitDecoratorMetadataexperimentalDecorators - 都需要设置为true
  2. 类上必须至少有一个装饰器(这就是为什么有些服务类使用@Injectable()装饰器,否则它们的依赖关系的元数据不会被发出)
  3. 我已经撰写了一篇关于该主题的深入文章here

答案 1 :(得分:2)

如果我理解正确,你会要求更多理论(js背后的)答案。

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

因此,提供者将是一个单例实例,直到它被定义为止。