Angular 是一款非常流行的前端 JavaScript 框架，它提供了丰富的功能以便于我们构建富交互式应用。其中，服务是 Angular 框架的一个关键元素，它们可以用来处理各种前端应用程序中的业务需求。本文将详细介绍 Angular 中服务的作用，以及如何使用它们来开发稳健的前端应用程序。
什么是 Angular 服务？
Angular 服务是一种可注入的对象，可以被其他组件或服务使用。它们可以用来执行各种功能，例如调用 API、处理用户输入、管理状态等。服务通常包含多个方法，这些方法可供其他组件调用来执行特定的任务。在 Angular 中，服务通常用于将应用程序中的逻辑分离出来，以便于进行组件化开发。
Angular 服务的优点
使用 Angular 服务有很多优点。以下是其中的一些：
代码复用性
一个好的 Angular 服务可以被多个组件使用，这样可以避免代码重复。当你需要在多个组件中执行相同的逻辑时，可以将这些逻辑封装在一个服务中，并使它可供其他组件调用。
可测试性
服务通常不依赖于 DOM 和浏览器 API，这使得我们可以在虚拟的环境中测试它们，这样可以更容易地编写可靠的单元测试，模拟各种各样的情况来测试你的代码，进而提升代码质量。
代码可维护性
使用 Angular 服务可以将业务逻辑从组件中分离出来，从而提高代码的可维护性。将特定业务逻辑封装在服务中，可以使组件更专注于它们自己的任务，并使代码变得更易读、易维护。
如何使用 Angular 服务？
现在我们已经知道服务的作用和优点了，那么如何使用 Angular 服务呢？这里是一些简单的步骤：
创建一个服务
要创建一个Angular服务，需要先生成一个 service 文件。
以 Angular CLI 为例，打开终端，定位到您的项目目录中，输入命令：
ng generate service my-service
即可在项目的src/app目录下生成my-service.service.ts文件。
在my-service.service.ts文件中，定义一个类名MyService，这是我们的服务的核心。
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyService {
}使用@Injectable() 装饰器来把 MyService 注册为一个可注入的服务，并配置参数providedIn: 'root'，意味着应用中只存在一个MyService服务，并且该服务可以在应用的任何地方使用。
实现服务方法
接下来实现服务类的方法。在本例中，我们假设服务需要加载一个设定时间的提示信息，并在设定时间后将其删除。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- --------- -
------- -------- ------ - ---
------ -------------------- ------- -------- -------- ---- -
------------ - --------
------------- -- -
------------ - ---
-- ---------
-
------ ------------- ------ -
------ -------------
-
-loadMessage() 方法接收两个参数 —— message 和 timeout。它首先设置 message 实例属性，然后启用一个定时器，在 timeout 时间后将message设置为空。
getMessage() 方法返回 message 属性值。
使用服务
要在组件中使用服务，我们需要首先将服务注入到组件构造函数中。在本例中，我们将服务注入到AppComponent 组件中。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------------
------------
--------- -----------
--------- -
------ ----- -------
------- ---------------------------- ----------------
------- ------- --------
-
--
------ ----- ------------ -
----- - --- -----
------- - ---
------------------- ---------- ---------- --
------ -------------- ---- -
-------------------------------- -- - --------- ------
------------ - ----------------------------
-
-在构造函数中注入服务，然后使用 myService.loadMessage() 方法来加载提示信息。getMEssage() 方法用于检索当前消息，并将其赋值给组件的 message 属性。
现在运行应用程序并单击按钮，你会看到在三秒钟后显示的消息。恭喜你，你已经成功地创建了 Angular 服务！
总结
通过本文，我们详细讲述了 Angular 服务的作用、优点以及如何使用它们。Angular 服务的强大功能使得我们能够更好地处理业务逻辑，从而构建更加可维护、可扩展和可测试的前端应用程序。如果你正在开发一个 Angular 应用程序，那么务必要学习 Angular 服务的使用方法，以便您的应用可以更加健壮和具有可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6456f15d968c7c53b09d5953