什么是依赖注入
Angular 是一个基于组件的前端开发框架，依赖注入（Dependency Injection，DI）是它的核心概念之一。
依赖注入能够简化组件之间的管理、调用和测试，它的本质是在运行时动态地将对象（或函数等）的依赖关系组合起来。
在 Angular 中，组件是由许多类、模块和服务组成的。服务是一个可注入的对象，可以在组件中使用它来执行某些操作，如获取数据、发送请求等。依赖注入就是将这些服务注入到组件中。
如何使用依赖注入
使用依赖注入，需要遵循如下步骤：
声明依赖：在组件的构造函数中声明需要依赖注入的服务。
注册服务：在根模块或某个模块中注册服务。
注入依赖：在组件中注入服务。
声明依赖
在组件的构造函数中，声明需要注入的服务。
import { SomeService } from './some.service';
constructor(private someService: SomeService) { }上述代码中，我们声明一个 SomeService 服务，并通过构造函数将它注入到组件中。
注册服务
服务需要先在根模块或某个模块中注册，才能被注入到组件中。
import { NgModule } from '@angular/core';
import { SomeService } from './some.service';
@NgModule({
providers: [SomeService]
})
export class AppModule { }上述代码中，我们在 AppModule 模块中注册了 SomeService 服务。providers 属性用来注册服务，其中的 SomeService 告诉 Angular 该服务需要被注入到其他组件中。
注入依赖
在组件中注入服务，只需要将它作为构造函数的参数，Angular 将自动将其注入。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------------ --------- -------------- ------------ --------------------------- ---------- ---------------------------- -- ------ ----- ---------------- - ------------------- ------------ ------------ - - -
上述代码中，我们在 ExampleComponent 组件中注入了 SomeService 服务，Angular 将自动把服务注入到组件中。
依赖注入的好处
使用依赖注入，可以带来以下好处：
生命周期管理：依赖注入器管理服务的实例，它知道服务何时被创建和销毁，保证了服务的生命周期得到正确管理。
解耦和复用：将依赖与组件分离，可以减少组件的复杂度，使组件易于编写、测试和维护。
可测试性：使用依赖注入，可以更轻松地编写可测试的代码。
示例代码
下面是一个示例代码，展示如何在 Angular 中使用依赖注入：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- - ---- -----------------------
------------
--------- --------------
------------ ---------------------------
---------- ----------------------------
--
------ ----- ---------------- -
------- ------ - ---------------------------------------------
------------------- ----- ----------- --
---------- -
------ ---------------------------
-
-上述代码中，我们声明了 HttpClient 服务，并注入到组件中。在 getUsers() 方法中，我们使用 HttpClient 向远程服务获取数据。
总结
依赖注入是 Angular 中的核心概念之一，它为 Angular 的组件体系提供了强大的灵活性和可维护性。学习和使用依赖注入可以使开发变得更简单，更容易测试和维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471645c968c7c53b0f4377f