Angular 服务教程:如何创建可复用的服务

Angular 服务是 Angular 应用程序的核心部分之一,可以被用于处理重复的任务和业务逻辑,并且可以在不同的组件之间共享数据和功能。在此教程中,您将会学习到如何创建可复用的服务,并且在多个组件中使用它们。

什么是 Angular 服务?

在 Angular 应用程序中,服务是一个可注入的类,可以用于执行重复的任务和共享业务逻辑和数据。服务可以在组件之间共享,并且可以用于与后端数据进行交互和处理。

使用 Angular 服务的好处有:

  • 服务可以在整个 Angular 应用程序中重复使用。
  • 服务可以帮助保持组件的代码简洁和干净。
  • 服务可以用于处理复杂的业务逻辑,并且可以在组件之间共享。
  • 服务可以用于处理 HTTP 请求并且可以对数据进行转换和处理。

创建 Angular 服务

要创建一个 Angular 服务,我们需要使用 Angular CLI 命令行工具。首先,使用以下命令来创建名为 user.service 的服务:

-- -------- ------- ----

这将会创建名为 user.service.ts 的 TypeScript 类文件,并且在 app.module.ts 中注册该服务。

接下来,在 user.service.ts 文件中,我们可以创建一个简单的服务,用于获取用户数据。例如:

------ - ---------- - ---- ----------------

-------------
  ----------- ------
--
------ ----- ----------- -
  ----- - -
    - --- -- ----- ------ --
    - --- -- ----- ------ --
    - --- -- ----- ----- --
    - --- -- ----- ------- --
  --

  --------------- ------- -
    ------ -------------------- -- ------- --- ----
  -
-

在这个示例服务中,我们定义了一个名为 users 的数组,用于保存用户数据。我们还创建了一个方法 getUserById,用于根据 ID 获取用户数据。

注入服务

一旦我们创建了一个服务,我们需要在组件中使用它。要使用服务,我们需要将服务注入到组件中。我们可以通过 构造函数注入 服务。

例如,在下面的组件中,我们将注入 UserService 服务:

------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ------------------

------------
  --------- -----------
  --------- -
    -------- ------------
    ----
      --- ----------- ---- -- --------- --------- -------
    -----
  --
--
------ ----- ------------- ---------- ------ -
  ----- - ---

  ------------------- ------------ ------------ --

  ---------- -
    ---------- - -----------------------
  -
-

在这个组件中,我们将 UserService 服务注入到了构造函数中,并且在 ngOnInit() 方法中使用服务来获取 users 数组数据。

提供服务

默认情况下,Angular 服务是注入到根级别的提供器中。可以在 @Injectable 装饰器中设置 providedIn 选项,以更改提供者的身份验证位置。

------ - ---------- - ---- ----------------

-------------
  ----------- ------
--
------ ----- --------- -
  -- ---
-

结论

服务是 Angular 应用程序核心部分之一。它们可以帮助我们避免重复的代码,并且可以在多个组件之间共享和重用数据和功能。在本教程中,我们学习了如何创建和注入服务,以及如何在组件之间使用它们。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6719d7619b4aadf9e005f247