在 Angular 开发中，组件通信是非常重要的一环。传统的组件通信方法包括父子组件之间的 @Input 和 @Output，还有通过 RxJS 的 Subject 或者 EventEmitter 进行跨组件通信。但是这些方法都有一些局限性，比如只能在父子组件之间进行通信，或者需要通过订阅和触发事件的方式来进行通信。
在 Angular 服务 Service 的帮助下，我们可以更加方便地进行组件通信，同时也解决了传统方法的局限性问题。
什么是 Angular 服务 Service
Angular 服务 Service 是一个可注入的类，它的主要作用是提供一些可重用的方法和数据，供多个组件共享和使用。我们可以将一些需要在多个组件中使用的方法和数据封装到服务中，然后通过注入服务的方式来使用它们。
Angular 服务 Service 是单例模式，也就是说，在整个应用中只有一个实例，因此可以用来保存一些共享的数据，比如用户登录状态、用户信息等。
Angular 服务 Service 的优势
相比传统的组件通信方法，Angular 服务 Service 有以下几个优势：
可以在任何组件中使用：服务可以被注入到任何组件中，因此可以在任何组件中使用服务提供的方法和数据。
可以跨组件通信：服务可以被多个组件共享，因此可以用来进行跨组件通信，不再局限于父子组件之间的通信。
数据共享方便：服务是单例模式，可以用来保存一些共享的数据，比如用户登录状态、用户信息等。
Angular 服务 Service 的使用
下面我们通过一个示例来演示 Angular 服务 Service 的使用。
假设我们有两个组件：一个是用户列表组件 UserListComponent，另一个是用户详情组件 UserDetailsComponent。我们希望在用户列表组件中点击某个用户时，能够将该用户的信息传递给用户详情组件进行展示。
首先，我们需要创建一个 UserService 服务，用来保存用户信息：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
-------------
----------- ------
--
------ ----- ----------- -
------- ------------- ----
--------------------- ---- -
----------------- - -----
-
----------------- -
------ ------------------
-
-在 UserService 中，我们定义了一个私有变量 selectedUser，用来保存当前选中的用户信息。同时，我们定义了两个公共方法 setSelectedUser 和 getSelectedUser，分别用来设置和获取当前选中的用户信息。
接下来，在用户列表组件 UserListComponent 中，我们需要注入 UserService 服务，并在点击用户时调用 setSelectedUser 方法来保存当前选中的用户信息：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- ----------------
--------- -
----
--- ----------- ---- -- ------ ---------------------------
-- --------- --
-----
-----
-
--
------ ----- ----------------- -
----- - -
- --- -- ----- ----- --
- --- -- ----- ------- --
- --- -- ----- ------ -
--
------------------- ------------ ------------ --
---------------- ---- -
---------------------------------------
-
-在用户列表组件中，我们定义了一个 users 数组，用来展示用户列表。在用户点击时，我们调用了 UserService 的 setSelectedUser 方法，将当前选中的用户信息保存到 UserService 中。
最后，在用户详情组件 UserDetailsComponent 中，我们同样需要注入 UserService 服务，并在 ngOnInit 生命周期钩子中调用 getSelectedUser 方法来获取当前选中的用户信息：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- -------------------
--------- -
---- -------------
------ --------- -------
------ -- ------- ------
------
-
--
------ ----- -------------------- ---------- ------ -
----- ----
------------------- ------------ ------------ --
---------- -
--------- - -----------------------------------
-
-在用户详情组件中，我们定义了一个 user 变量，用于展示当前选中的用户信息。在 ngOnInit 生命周期钩子中，我们调用了 UserService 的 getSelectedUser 方法，获取当前选中的用户信息，并将其赋值给 user 变量。
总结
Angular 服务 Service 是一种非常方便的组件通信方式，它可以跨组件通信，同时也可以用来保存共享的数据。在实际开发中，我们可以将一些需要在多个组件中使用的方法和数据封装到服务中，然后通过注入服务的方式来使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662c4fc4d3423812e49c8d17