Angular 是一款非常流行的前端框架，它支持依赖注入 (Dependency Injection，DI)。DI 是一种设计模式，可以让我们更有效地管理模块和组件之间的关系，提高项目的可维护性和可扩展性。本文将介绍 Angular 中的 DI，包括其基本原理、使用方法和示例代码。
DI 的基本原理
DI 的基本原理是通过构造函数或属性将所需要的服务注入到组件中。服务是 Angular 中的一个重要概念，可以是一个类、一个函数或一个变量。当组件需要调用服务中的方法或属性时，通过注入服务的方式调用。依赖项的注入可以在构造函数、组件属性或类注释中完成。
在 Angular 中使用 DI
在 Angular 中使用 DI，需要使用 @Injectable() 装饰器来标识服务或组件，并在构造函数中声明所需要的依赖项。
示例代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- -------------- -
------------- -
-- ---
-
-在上面的示例中，我们创建了一个 ProductService 的服务，并使用 @Injectable() 装饰器来标识它。providedIn: 'root' 表示该服务将在整个应用程序中共享，并且可以在任何组件中进行注入。如果省略 providedIn，则需要将该服务显式注册到指定的模块中。
在组件中使用注入的服务，只需要在构造函数中声明依赖项即可。
示例代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------------
------------ --------------------------------
--
------ ----- -------------------- -
-------- - ---
------------------- --------------- --------------- --
---------- -
------------- - ----------------------------------
-
-在上面的示例中，我们创建了一个 ProductListComponent 组件，并注入了 ProductService 服务。通过声明构造函数参数 private productService: ProductService，可以将 ProductService 服务注入到组件中。在 ngOnInit() 方法中，我们可以调用 ProductService 服务中的 getProducts() 方法来获取产品列表。
总结
依赖注入是 Angular 中的一个重要概念，可以帮助我们更好地管理模块和组件之间的关系。通过使用 @Injectable() 装饰器和构造函数，我们可以轻松地在组件中注入所需的依赖项，并且使模块更易于维护和扩展。希望本文能够对 Angular 开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d505948841e9894b9d934