如何在Angular2中正确使用依赖注入(DI)？

Question

我一直试图弄清楚(DI)依赖注入如何在Angular2中工作.每当我尝试将服务/或类注入到我的组件中时,我遇到了很多问题/问题.

从不同的googled文章,我需要providers: []在组件配置中使用,或者有时我需要@Inject()在我的构造函数中使用或直接注入bootstrap(app, [service])？我也看到一些文章要我@injectable装扮装饰.

例如:要注入Http,我只需要将import{Http}Http放在提供程序中,但对于FormBuilder,我需要@Inject()在构造函数中使用.

什么时候使用什么有什么经验法则？你能提供一些示例代码片段吗？谢谢 :-)

Answer 1

广泛的问题,TL; DR版本

@Injectable()

• 是一个装饰器,它告诉typescript装饰类有dependencies并且并不意味着这个类可以注入其他类.

• 然后TypeScript理解它需要在构造时通过使用imported依赖项将所需的元数据注入到修饰类中.

bootstrap(app,[service])

• bootstrap()负责在我们的应用程序引导时为其创建根注入器.它将提供程序列表作为第二个参数,它将在创建时直接传递给注入器.

• 您使用将在许多地方使用的服务来引导您的应用程序Http,这也意味着您不需要providers: [Http]在类配置中编写.

提供者:[服务]

• 提供者还负责将所有服务的参数传递给Injector.

• 如果服务bootstrap()不合适,您可以将服务放在提供商中.并且仅在少数地方需要.

@注入()

• 是也一个装饰,做的实际注入这些服务工作的功能
  是这样的.constructor(@Inject(NameService) nameService)
• 但是如果你使用TS你需要做的就是这个constructor(nameService: NameService),打字稿将处理其余的.

进一步阅读

• 如果你想深入研究DI,请看看这篇精彩的文章

• 并且要了解装饰器与注释,请看这个.

• 这是官方指南.

• Gunter's Answer Mark Rajcok's Answer 和 Accepted Answer

希望这可以帮助.:)

Answer 2

Angular2中的依赖注入依赖于链接到组件树的分层注入器.

这意味着您可以在不同级别配置提供程序:

• 对于引导它的整个应用程序.在这种情况下,所有子注入器(组件1)将看到此提供程序并共享与之关联的实例.在进行交互时,它将是同一个实例
• 对于特定组件及其子组件.与之前相同,但对于特定于à的组件.其他组件将不会看到此提供程序.如果重新定义上面定义的内容(例如,引导时),将使用此提供程序.所以你可以覆盖一切.
• 对于服务.没有与之关联的提供商.它们使用触发元素中的注入器(直接=组件或间接=触发服务链调用的组件)

关于你的其他问题:

• @Injectable.要注入一个类,你需要一个装饰器.组件有一个(@Component一个),但服务是简单的类.如果服务需要在其中注入依赖项,则需要此装饰器.
• @注入.在大多数情况下,构造函数参数的类型足以让Angular2确定要注入的内容.在某些情况下(例如,如果您明确使用OpaqueToken而不是类来注册提供程序),则需要指定有关要注入的内容的一些提示.在这种情况下,您需要使用@Inject.

有关其他详细信息,请参阅以

• 在角度2(Beta)中将一项服务注入另一项服务的最佳方法是什么？
• Angular2:注入非@Injectable类
• 注入实现某些接口的所有服务