在使用 Angular 进行开发的时候，依赖注入（Dependency Injection）是一个非常重要的概念。本文将介绍什么是依赖注入，为什么需要使用依赖注入，以及如何在 Angular 中使用依赖注入。
什么是依赖注入？
依赖注入是一种设计模式，在这个模式中，对象从外部源（通常是一个容器）获取所需要的依赖关系，而不是自己创建。简单来说，依赖注入是将一个对象所依赖的其他对象通过构造函数、方法或属性注入到该对象中。
在 Angular 中，依赖注入是一个核心的概念，用于解决当一个组件或服务需要依赖其他组件或服务时，如何将这些依赖关系注入到这个组件或服务中的问题。
为什么需要使用依赖注入？
使用依赖注入可以使组件或服务更加灵活、可复用、可测试和可维护。下面分别介绍一下依赖注入的几个优点：
灵活性
如果在组件或服务中直接创建依赖关系，那么这些依赖关系将与组件或服务紧密耦合在一起。这会导致组件或服务难以修改、维护和测试。但是，如果使用依赖注入，那么这些依赖关系将变得更加灵活，可以根据需要进行动态更改。
可复用性
使用依赖注入可以使组件或服务更加可复用。例如，如果一个组件或服务需要一个数据服务或日志服务，那么这些服务可以通过依赖注入到该组件或服务中。这意味着这些组件或服务更容易在应用的其他地方进行重用。
可测试性
使用依赖注入可以使组件或服务更加可测试。由于通过依赖注入将依赖项从组件或服务中抽象出来，因此可以更轻松地编写和运行单元测试，以确保这些依赖关系按照预期工作。
可维护性
使用依赖注入可以使代码更容易维护。由于组件或服务的依赖关系有助于管理代码和减少复杂性，因此可以更快速和安全地维护代码库。
如何在 Angular 中使用依赖注入？
在 Angular 中使用依赖注入是非常简单的。首先，需要将需要注入的依赖关系标记为可注入的。然后，在需要使用这些依赖关系的组件或服务中，可以将它们通过构造函数注入进来。
将依赖关系标记为可注入的
为了标记一个依赖关系为可注入的，需要在该依赖关系的类上使用 @Injectable 装饰器。例如，下面是一个 LoggerService 的例子：
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
log(message: string) {
console.log(`Logger: ${message}`);
}
}在上面的例子中，LoggerService 类通过 @Injectable 装饰器进行了标记，这意味着该类可以被注入到其他组件或服务中。
注入依赖关系
在需要使用某个依赖关系的组件或服务中，需要通过构造函数将该依赖关系注入进来。例如，下面是一个 AppComponent 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- -------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------- -------------- -------------- -
------------------------------------ ---------------
-
-在上面的例子中，AppComponent 类通过构造函数注入了一个 LoggerService 实例。在组件初始化时，可以使用该实例调用 log 方法输出一条日志。
示例代码
下面是一个完整的示例代码，演示如何在 Angular 中使用依赖注入：
-- -------------------- ---- -------
------ - ---------- ---------- - ---- ----------------
-------------
------ ----- ------------- -
------------ ------- -
-------------------- -------------
-
-
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------------- -------------- -------------- -
------------------------------------ ---------------
-
-在上面的示例代码中，首先定义了一个 LoggerService 类，并将其标记为可注入的。然后，在 AppComponent 中通过构造函数将 LoggerService 实例注入进来，并在组件初始化时调用 log 方法输出一条日志。
结论
依赖注入是 Angular 中的一个核心概念，它可以使组件或服务更加灵活、可复用、可测试和可维护。在 Angular 中，可以通过为依赖关系标记 @Injectable 装饰器和在组件或服务中通过构造函数注入依赖关系来使用依赖注入。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ef63296fbf9601972efe29