Bootstrap 中的 Angular2 提供程序与 @component

Question

据我了解，您可以像这样在 Bootstrap 调用中定义您的应用程序提供程序:

bootstrap(
  App,
  [disableDeprecatedForms(), provideForms()]]
)

或者像这样在你的根组件中:

@Component({
  selector: 'my-app',
  providers: [disableDeprecatedForms(), provideForms()],
  ...
)

但是，我创建了一个表单验证器插件，它需要 provideForms 提供程序，并且该指令仅在 Bootstrap 选项时有效。我创建了一个 plunk to illstrate the problem :如果我将 providerForms() 添加到 Bootstrap 调用，验证器就可以工作。一旦我从 Bootstrap 调用中注释掉 providerForms() ，验证器就不再工作了。我假设组件中的 providerForms 定义就足够了。有什么解释吗？

Answer 1

Angular2 DI 总是向上查找所请求依赖项的提供者。如果由 bootstrap 实例化的服务需要依赖项，则它不会注入(inject)在树的更下方提供的依赖项。

Providing at bootstrap(...) 和 @Component(...) 根组件并不等价，但这种区别与根组件或其子项或其他后代之一。bootstrap() 比根组件高一级。

Angular2 样式指南还建议优先使用根组件而不是 bootstrap()，因为 Bootstrap 应该为系统内容保留。

在创建第一个组件之前需要实例化表单和路由器(例如，在早期版本的 V3 路由器中存在一个错误，根组件需要注入(inject) Router 或包含一个 routerLink，否则路由器无法启动)。

因此，因为在创建根组件之前需要实例化一些东西，所以出现了 bootstrap() 和根组件之间的区别变得相关的情况。