什么是依赖注入（DI）？
依赖注入（DI）是一种设计模式，旨在实现松耦合的代码。它是通过将对象的依赖项传递给它们，而不是在对象内部创建它们来实现的。
在 Angular 中，依赖注入是一种非常重要的概念。它使得在组件、指令、服务等之间共享代码变得更加容易。
Angular 中的依赖注入
在 Angular 中，依赖注入是通过以下方式实现的：
1. 注入器（Injector）
注入器是 Angular 的依赖注入系统的核心。它是一个负责管理依赖项的容器，可以在组件、指令、服务等之间共享依赖项。
2. 服务（Service）
服务是 Angular 中的一个重要概念。它是一个可被注入到组件、指令等中的对象。服务可以用来共享代码、处理业务逻辑等。
3. 提供器（Provider）
提供器用来告诉注入器如何创建一个对象。它可以是一个类、一个工厂函数、一个值等。
4. 注入（Inject）
注入是将一个依赖项注入到组件、指令等中的过程。在注入时，注入器会自动查找并创建依赖项。
如何使用依赖注入？
在 Angular 中，使用依赖注入非常简单。下面是一个使用依赖注入的示例：
------ - ---------- ------ - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -------------------
--------- -----------------------
--
------ ----- ----------- ---------- ------ -
-------- -------
------------------- ---------- ---------- --
----------- ---- -
------------ - ----------------------------
-
-在上面的示例中，我们定义了一个组件 MyComponent，它依赖于一个名为 MyService 的服务。在组件的构造函数中，我们使用 private 关键字将 MyService 注入到了组件中。
在 ngOnInit 方法中，我们通过调用 myService.getMessage() 方法获取服务中的消息，并将其赋值给 message 变量。最后，我们在模板中使用 message 变量来显示消息。
如何创建服务？
在 Angular 中，创建服务非常简单。下面是一个创建服务的示例：
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- --------- -
------------- ------ -
------ ------- --------
-
-在上面的示例中，我们定义了一个名为 MyService 的服务，并在类上使用 @Injectable 装饰器来告诉 Angular 如何创建这个服务。
在 @Injectable 装饰器中，我们使用 providedIn: 'root' 来告诉 Angular 将该服务提供给整个应用程序。这意味着我们可以在任何组件、指令等中注入该服务。
如何提供服务？
在 Angular 中，提供服务有三种方式：
1. 在根级别提供服务
在根级别提供服务是最简单的方式。我们只需要在服务类上使用 @Injectable 装饰器，并设置 providedIn: 'root' 即可。
2. 在组件级别提供服务
在组件级别提供服务是一种更加灵活的方式。我们可以在组件的 providers 数组中提供服务，这样该服务只能在该组件及其子组件中使用。
------ - --------- - ---- ----------------
------ - --------- - ---- ---------------
------------
--------- -------------------
--------- -----------------------
---------- ------------
--
------ ----- ----------- -
-------- -------
------------------- ---------- ---------- --
----------- ---- -
------------ - ----------------------------
-
-在上面的示例中，我们在组件的 providers 数组中提供了 MyService 服务。这意味着该服务只能在该组件及其子组件中使用。
3. 在模块级别提供服务
在模块级别提供服务是一种更加灵活的方式。我们可以在模块的 providers 数组中提供服务，这样该服务可以在该模块及其子模块中使用。
------ - -------- - ---- ---------------- ------ - --------- - ---- --------------- ------ - ----------- - ---- ----------------- ----------- ------------- -------------- ---------- ------------ -- ------ ----- -------- --
在上面的示例中，我们在模块的 providers 数组中提供了 MyService 服务。这意味着该服务可以在该模块及其子模块中使用。
总结
在本文中，我们介绍了 Angular 中的依赖注入，包括注入器、服务、提供器和注入等。我们还提供了一些示例代码，帮助您更好地理解和应用依赖注入。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660a43d0d10417a2229a05cf