本文由达观数据研究院根据《Total Guide To Angular 6+ Dependency Injection?—?providedIn vs providers》编译,如有不当,还请指正。
Angular 6为我们提供了更好的语法——provideIn,用于将服务注册到Angular依赖注入机制中。然而,新语法带来了非常多使用上的困惑,在GitHub评论,Slack和Stack Overflow上看到一些开发者经常混淆。所以现在,让我们把这一切都说清楚。
接下来我们将会学习什么?
- 依赖注入回顾(可选)
- 使用旧语法进行依赖注入——
providers: []
- 使用新语法进行依赖注入——
providedIn: root | SomeModule
providedIn
的使用场景
- 在项目中如何使用新语法的最佳实践
- 总结
依赖注入
让我们快速回顾一下依赖注入是什么,如果感觉简单,你可以跳过这一小节。
依赖注入(DI)是一种创建依赖其他对象的方法。在创建一个新的对象实例时,依赖注入系统将会提供依赖对象(称为依赖关系) - Angular Docs
我们的组件和服务都是类,每个类都有一个名为constructor的特殊函数,当我们想要在我们的应用程序中创建该类的对象(实例)时调用它。
在我们的服务中,我们都看到过类似于
constructor(private http: HttpClient)
这样的代码。假如没有Angular DI机制,我们必须手动提供HttpClient来创建我们自己的服务。
我们的代码会像这样:
const myService = new MyService(httpClient)
;但是,我们还需要获得
httpClient
对象。
于是,我需要再实例一个HttpClient:
const httpClient = new HttpClient(httpHandler)
;但
httpHandler
又从哪来?如果这样创建下去,到底什么时候是个头。而且,这个过程相当繁琐,而且很容易出错。
幸好,Angular 的DI机制自动地帮我们完成了上述的所有操作,我们所要做的只是在组件的构造函数中指定依赖项,组件将会很轻松地就能用到这些依赖。可天下没有免费的午餐...
使用旧语法进行依赖注入
为了让工程实践做的更好,Angular必须了解我们想要注入到组件和服务中的每一个实体。
在Angular 6 发布以前, 唯一的方法是在
providers: []
中指定服务,如下: