Angular 是一款功能强大的前端框架，它提供了许多有用的特性和模块，其中之一就是服务 (Service)。服务是一个可重用的代码块，它可以在应用程序的任何地方使用，帮助我们封装代码以进行更好的组件化和维护性。
本文将深入探讨 Angular 中的服务，涵盖以下方面：
- 什么是服务
- 为什么要使用服务
- 如何创建和使用服务
- 服务的应用示例
什么是服务
服务是 Angular 应用中用来封装和共享可重用代码的机制。当我们创建服务时，它会创建一个单例对象，该对象可以在整个应用程序中使用。因此，服务可以在 Angular 组件之间共享数据和方法。
为什么要使用服务
使用服务可以带来以下好处：
- 服务可以将代码封装在单独的模块中，从而使代码更加清晰和易于维护。
- 服务可以帮助我们在应用程序中共享数据和行为，从而减少重复代码。
- 服务可以在整个应用程序中提供一种中央管理方法，可以轻松地对应用程序中所有组件进行修改。
如何创建和使用服务
要创建 Angular 服务，我们需要使用 @Injectable() 装饰器。该装饰器表示这是一个可注入的类，可以在其他组件中使用。
以下是创建服务的模板代码：
------ - ---------- - ---- ---------------- ------------- ----------- ------ -- ------ ----- --------- - -- ------- ---- -
在上面的代码中：
@Injectable()装饰器指定了这是一个注入器，可以将它注入其他组件中。providedIn: 'root'指定了服务是作为根注入器提供的，这意味着该服务的实例将成为整个应用程序的单例对象。
创建服务后，我们可以在任何组件中使用它。要使用服务，我们需要将 MyService 添加到组件构造函数中的参数列表中：
------ - --------- - ---- ---------------- ------ - --------- - ---- --------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ---------- ---------- -- -
在上面的代码中，我们将 MyService 添加为 AppComponent 的依赖项。当我们创建 AppComponent 实例时，myService 将注入 AppComponent 中。
现在，我们已经成功创建和注入了 Angular 服务。接下来，让我们看看如何使用服务在 Angular 应用程序中实现一些功能。
服务的应用示例
在本节中，我们将使用服务来创建一个简单的计数器应用程序。该应用程序包含两个组件，一个用于显示当前计数器的值，另一个用于增加计数器的值。
创建服务
首先，我们需要创建一个服务来存储和管理计数器的值。以下是计数器服务的代码：
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- -------------- -
------- ------------- ------ - --
--- -------- ------ -
------ ------------------
-
------------ ---- -
--------------------
-
-在上面的代码中，我们创建了一个名为 CounterService 的服务，该服务具有以下两个方法：
value()获取当前计数器的值。increment()增加计数器的值。
注意，我们以私有成员变量的形式存储计数器的值，这是因为只能通过公共方法来访问数据（这称为封装），从而保证了我们的数据安全。
创建组件
现在，我们需要创建两个组件来显示和修改计数器的值。以下是两个组件的代码：
counter-display.component.ts
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
------------
--------- ----------------------
--------- -
----------- ------ -- ------------ -------
-
--
------ ----- ----------------------- -
--- --------------- ------ -
------ --------------------------
-
------------------- --------------- --------------- --
-counter-increment.component.ts
------ - --------- - ---- ----------------
------ - -------------- - ---- ---------------------
------------
--------- ------------------------
--------- -
------- ------------------------- ----------
-
--
------ ----- ------------------------- -
------------------- --------------- --------------- --
------------ ---- -
--------------------------------
-
-在上面的代码中，CounterDisplayComponent 组件用于显示计数器的值，而 CounterIncrementComponent 组件用于增加计数器的值。这两个组件都依赖于 CounterService，因此它们都将其添加为依赖项，并使用其公共方法来访问和修改计数器的值。
修改应用程序模块
最后，我们需要修改 AppModule 模块，以便使用新的计数器组件。以下是 AppModule 的代码：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ----------------------- - ---- ----------------------------------------------
------ - ------------------------- - ---- --------------------------------------------------
------ - -------------- - ---- --------------------
-----------
------------- -
-------------
------------------------
-------------------------
--
-------- -
-------------
--
---------- -----------------
---------- --------------
--
------ ----- --------- - -在上面的代码中，我们添加了 CounterDisplayComponent 和 CounterIncrementComponent 组件，以及 CounterService 服务。这意味着所有组件都可以使用 CounterService 来访问和修改计数器的值。
运行应用程序
现在，我们已经成功创建了计数器应用程序。运行应用程序后，您应该看到一个显示当前计数器值的标题和一个按下按钮。每次按下按钮时，应用程序将增加计数器的值。
注意，在整个应用程序的生命周期中，我们只创建了一个 CounterService 实例，并在所有组件之间共享它，这是 Angular 中服务的强大之处。
结论
在本文中，我们深入探讨了 Angular 中的服务，以及如何创建和使用服务。我们还演示了如何使用服务创建一个简单的计数器应用程序。通过学习此示例，您应该能够更好地理解 Angular 服务的实际用途，并在实践中更有效地使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fcbc6b4471362601725910