在 Angular 开发中，我们经常需要多个组件之间进行通信，比如向兄弟组件传递数据、处理父组件传递的数据等等。这篇文章将介绍 Angular 中跨组件通信的方法，包含父子组件和兄弟组件之间的通信，并提供示例代码。
父子组件之间的通信
父组件向子组件传递数据是很常见的场景，我们可以使用 @Input 装饰器实现。下面是一个示例：
在父组件中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
------ ----------------------------------
-
--
------ ----- --------------- -
------------- - -------- ---- --------
-在子组件中：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- --------
--------- -
----- ------- ------
-
--
------ ----- -------------- -
-------- -------- -------
-这里我们定义了一个 ParentComponent 和一个 ChildComponent，父组件将 parentMessage 通过 @Input 装饰器绑定到 ChildComponent 实例中的 message 属性上。在子组件中，我们可以直接访问 message 属性显示数据。
当然，我们还可以使用模板语法中的 [] 实现绑定：
<child [message]="parentMessage"></child>
这样 ParentComponent 实例的 parentMessage 属性的值就会传递给子组件实例的 message 属性。
除了 @Input 装饰器，还可以使用 ViewChild 等属性获取子组件实例进行交互。
兄弟组件之间的通信
在 Angular 中，兄弟组件之间的通信需要一个中间件进行协调。我们可以使用 @Output 装饰器和 EventEmitter 来实现。
在兄弟组件中定义一个 SharedService：
-- -------------------- ---- -------
------ - ----------- ------------ - ---- ----------------
-------------
----------- ------
--
------ ----- ------------- -
------- ------------- - --- -----------------------
-------- - ----------------------------------
-------------------- ------- -
---------------------------------
-
-在 SharedService 中我们定义了一个 message$ 的可观察对象和一个 sendMessage 方法。当兄弟组件中需要发送数据时，可以调用 sendMessage 方法来触发事件，而其他组件中就可以监听这个事件并做出相应的处理。
在兄弟组件中使用 SharedService 来进行通信，示例：
Sibling1Component：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- --------------------
------------
--------- ---------------
--------- -
------ ------------------------------------------
-
--
------ ----- ----------------- -
------------------- -------------- -------------- --
------------------- ------- -
----------------------------------------
-
-Sibling2Component：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------- - ---- --------------------
------------
--------- ---------------
--------- -
----- ------- ------
-
--
------ ----- ----------------- -
-------- -------
------------------- -------------- -------------- --
---------- -
----------------------------------------- -- ------------- - ------
-
-在 Sibling1Component 中我们注入了 SharedService 服务，并通过 setMessage 方法将输入的字符串发送到中间件，触发事件。在 Sibling2Component 中，我们订阅了 SharedService 的 message$ 可观察对象，当事件触发时，调用回调函数来更新显示的数据。
总结
通过本文，我们了解了在 Angular 中跨组件通信的两种方式，并提供了示例代码。在实际开发中，我们需要根据不同的场景选择合适的方式来实现业务需求。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647101f0968c7c53b0f017be