前言
在 Angular 中，Service 和依赖注入是非常重要的概念。Service 可以作为数据和方法的容器，而依赖注入则可以实现简洁、高效的组件通信。本文将介绍如何使用 Service 和依赖注入来实现数据共享，并提供示例代码供读者学习参考。
Service 简介
Service 是 Angular 中的一个概念，它不同于组件，它不会直接渲染到视图上，而是用来存储数据和方法的容器。Service 可以在不同的组件之间共享数据，并且也可以通过依赖注入的方式在组件中使用。
在 Angular 中，我们可以通过 ng generate service [service-name] 命令来创建一个 Service，例如：
ng generate service my-data
这条命令会在项目中自动生成一个 my-data.service.ts 文件，我们可以在这个文件中定义 Service 相关的数据和方法。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ------------- -
------- ----- ----- - ---
------------- - -
--------- -
------ ----------
-
-------------- ------ -
--------- - ------
-
-我们使用 @Injectable 装饰器将 MyDataService 标记为可被注入的 Service。在构造函数中，我们可以注入其他依赖，例如 HttpClient，不过本文的重点是关于数据共享，这里不做详细介绍。
在 Service 中，我们定义了一个名为 data 的私有数组来存储数据。同时，我们也定义了两个方法，getData() 和 setData(value: any[])，用来获取和设置数据。这样，我们就可以在不同的组件中共享这个 Service，并使用这个 Service 来存储和获取数据了。
依赖注入
当我们需要在 Angular 组件中使用 Service 时，我们可以通过依赖注入的方式获取 Service 的实例。在组件的构造函数中，我们可以声明一个名为 myData 的参数，用来接收 MyDataService 的实例。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------- - ---- --------------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- -------------------- - ------------------- ------- -------------- - - -
在组件中，我们可以直接使用 myData 变量来访问 MyDataService 中的数据和方法。例如：
this.myData.setData([1, 2, 3]); const data = this.myData.getData(); console.log(data); // [1, 2, 3]
实现数据共享
有了 Service 和依赖注入的基础知识，我们就可以开始实现数据共享了。在本例中，我们将演示如何在两个不同的组件中共享一个数据，并且当数据发生变化时，另一个组件也能够立即反应出来。
我们可以分别创建两个组件，分别为 app-parent 和 app-child 组件。在 app-parent 组件中，我们将会定义一个名为 data 的数组，然后将这个数组存储到 MyDataService 中。在 app-child 组件中，我们将会使用同样的 Service 来获取 data 数组，并且在视图中展示出来。
首先，我们需要在 app.module.ts 中将 MyDataService 添加到 providers 中，这样才能在整个应用中共享这个 Service。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- - ---- --------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ----------------------------
------ - -------------- - ---- --------------------------
-----------
------------- -
-------------
----------------
--------------
--
-------- -
-------------
--
---------- ----------------
---------- --------------
--
------ ----- --------- - -随后，我们可以定义 app-parent 组件，这个组件中将 data 数组存储到 MyDataService 中。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ---------------------
------------
--------- -------------
--------- -
------- ----------------------------
----
--- ----------- ---- -- -------- ---- -------
-----
--
---------- --------------------------
--
------ ----- --------------- -
----- -------- - --- -- ---
------------------- ------- -------------- -
-------------------------------
-
----- -
--------------------------------------- - --- - ---
-------------------------------
-
-在这个组件中，我们将 data 数组初始化为 [1, 2, 3]，并且在构造函数中将这个数组存储到 MyDataService 中。我们通过 add() 方法往数组中添加数字，并且在调用 setData() 方法时将这个数组再次存储到 MyDataService 中。
最后，我们可以定义 app-child 组件来获取 data 数组，并在视图中展示出来。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- ---------------------
------------
--------- ------------
--------- -
----
--- ----------- ---- -- -------- ---- -------
-----
--
---------- -------------------------
--
------ ----- -------------- -
----- -------- - ---
------------------- ------- -------------- -
--------- - ----------------------
-
-在这个组件中，我们通过 myData.getData() 方法获取 data 数组，并将它赋值给本组件的 data 变量。这样，当 app-parent 组件中的数组发生变化时，app-child 组件中的视图也会即时发生更新。
总结
本文介绍了如何使用 Service 和依赖注入来实现数据共享。我们通过一个简单的示例，演示了如何在两个不同的组件中共享数据，并在数据发生变化时即时更新视图。希望本文能够帮助大家更好地理解 Angular 中 Service 和依赖注入的概念，以及如何使用它们来实现数据共享。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7c07b48841e9894453ccb