在 Angular 应用程序中，组件间的通信非常重要。组件之间的通信可以通过多种方式实现。在本文中，将介绍 Angular 中常用的组件通信方式，并提供示例代码。
父组件向子组件传递数据
父组件可以通过属性绑定将数据传递给子组件。子组件可以通过 @Input() 装饰器接收传递的数据。
父组件
<app-child [message]="parentMessage"></app-child>
export class ParentComponent {
parentMessage = 'Message from parent';
}子组件
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- ------------ --------- ------ ------- ------- -- ------ ----- -------------- - -------- -------- ------- -
子组件向父组件传递数据
子组件可以通过事件触发向父组件发送数据。父组件可以通过事件绑定来监听这些事件。
子组件
<button (click)="sendMessage()">Send Message</button>
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- ------------
--------- -------- ---------------------------- -----------------
--
------ ----- -------------- -
--------- ------------ - --- -----------------------
------------- -
------------------------------- ---- --------
-
-父组件
<app-child (messageEvent)="receiveMessage($event)"></app-child>
<p>{{ message }}</p>export class ParentComponent {
message: string;
receiveMessage($event) {
this.message = $event;
}
}兄弟组件之间的通信
兄弟组件之间的通信可以通过共享服务实现。在共享服务中定义一个可观察对象，兄弟组件可以通过订阅该可观察对象来进行通信。
共享服务
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------- ------------- - --- ------------------
-------- - ----------------------------------
-------------------- ------- -
---------------------------------
-
-组件 A
<button (click)="sendMessage()">Send Message</button>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------
------------
--------- ------------------
--------- -------- ---------------------------- -----------------
--
------ ----- ---------- -
------------------- ------------ ------------ --
------------- -
------------------------------------- ---- --------- ----
-
-组件 B
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ------------------
------------
--------- ------------------
--------- ------ ------- -------
--
------ ----- ---------- ---------- ------ -
-------- -------
------------------- ------------ ------------ --
---------- -
------------------------------------------- -- ------------ - ---------
-
-总结
组件之间的通信在 Angular 应用程序中非常常见。本文介绍了常用的组件通信方式，并提供了示例代码。希望能够帮助读者更好地理解 Angular 组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6604f99ad10417a2222746f7