在 Angular 中，Service 是一个非常重要的概念。它们允许我们在应用程序中共享数据和功能，并且可以帮助我们将应用程序的逻辑分离出来。在本文中，我们将探讨如何在 Angular 中封装 Service，以便在整个应用程序中使用它们。
TypeScript 的优势
在开始之前，让我们先谈一下 TypeScript。如果您已经使用过 Angular，那么您可能已经知道 TypeScript 是 Angular 的默认语言。但是，如果您还没有使用过 TypeScript，那么您可能会想知道为什么要使用它。
TypeScript 是一种静态类型的编程语言，它是 JavaScript 的超集。TypeScript 允许我们在编写代码时使用类型注释，这使得代码更易于阅读和维护。它还具有一些其他的优点，例如：
- 编译时类型检查
- 支持 ES6 和 ES7 的新特性
- 更好的 IDE 支持
- 更好的代码提示和自动完成
在本文中，我们将使用 TypeScript 编写 Angular Service。
创建一个 Service
在 Angular 中，Service 是一个普通的 TypeScript 类。让我们从创建一个简单的 Service 开始。首先，我们需要创建一个新的文件，例如 my-service.service.ts。
在该文件中，我们可以定义一个名为 MyService 的类。这个类可以有一些属性和方法，例如：
------ - ---------- - ---- ----------------
-------------
----------- -------
--
------ ----- --------- -
------- ----- -------- - ---
-------------- ------- -
----------------------
-
--------- -
------ ----------
-
-让我们来看看这个 Service 的代码。首先，我们导入了 Injectable 装饰器，这个装饰器允许我们将 Service 注册到 Angular 的依赖注入系统中。
接下来，我们定义了一个名为 MyService 的类，并在类上使用 @Injectable 装饰器。这个装饰器告诉 Angular，这个类是一个 Service。
在类中，我们定义了一个名为 data 的私有属性，它是一个字符串数组。我们还定义了两个公共方法：addData 和 getData。addData 方法将一个字符串值添加到 data 数组中，而 getData 方法返回整个 data 数组。
注册 Service
现在我们已经创建了一个 Service，但是我们还需要将它注册到 Angular 的依赖注入系统中，以便在整个应用程序中使用它。有几种不同的方法可以注册 Service，但是我们将使用最简单的一种：将 Service 注册到应用程序的根模块中。
要注册 Service，我们需要打开 app.module.ts 文件，并在 providers 数组中添加我们的 Service。这个数组应该位于 @NgModule 装饰器中，例如：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------- - ---- ----------------------- ----------- ------------- --------------- -------- ---------------- ---------- ------------ ---------- --------------- -- ------ ----- --------- --
在这个例子中，我们将 MyService 添加到 providers 数组中。这将使它在整个应用程序中可用。
在组件中使用 Service
现在我们已经注册了 Service，我们可以在组件中使用它。要使用 Service，我们需要使用构造函数注入它。例如，在我们的组件中，我们可以这样做：
------ - --------- - ---- ----------------
------ - --------- - ---- -----------------------
------------
--------- -----------
--------- -
------- ----------------------- -------------
----
--- ----------- ---- -- -------- ---- -------
-----
--
--
------ ----- ------------ -
----- -------- - ---
------------------- ---------- ---------- --
--------- -
--------------------------- -------
--------- - -------------------------
-
-在这个例子中，我们导入了 MyService，并在组件的构造函数中注入它。我们还定义了一个名为 data 的属性，它是一个字符串数组。
在组件的模板中，我们创建了一个按钮，当用户单击它时，我们将调用 addData 方法。这个方法将一个新的字符串值添加到 Service 的 data 数组中，并将整个数组赋值给组件的 data 属性。然后，我们在模板中使用 *ngFor 指令来显示 data 数组中的所有条目。
总结
在本文中，我们探讨了如何在 Angular 中封装 Service，以便在整个应用程序中使用它们。我们使用 TypeScript 编写了一个简单的 Service，并将其注册到应用程序的根模块中。然后，我们在组件中使用 Service，并演示了如何将 Service 中的数据显示在模板中。
希望这篇文章对您有所帮助，并能够帮助您更好地理解 Angular 中的 Service 概念。如果您有任何问题或建议，请随时在评论中留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/657ef129d2f5e1655d9d20db