前端开发中，组件通讯是非常常见的任务。在 Angular 中，组件通讯有多种方式可供选择。本文将对这几种方式进行详细说明，并提供示例代码。希望能对初学者以及有一定经验的开发者有所帮助。
一、通过 @Input 和 @Output 实现组件通讯
使用 @Input 和 @Output，可以在组件之间进行数据传递。@Input 和 @Output 是装饰器，用来为组件类声明输入和输出属性。
1. @Input
通过在一个组件中使用 @Input 装饰器来暴露这个组件的属性，这个属性的值可以被其他组件所引用。在另一个组件中，可以使用 [inputProperty] 的形式来引用上一个组件的属性。
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------------
--------- -
-------- -------------
----- ------- ------
-
--
------ ----- -------------- -
-------- -------- -------
-<parent-component> <child-component [message]="parentMessage"></child-component> </parent-component>
2. @Output
通过在一个组件中使用 @Output 装饰器来发射一个事件。父组件可以订阅这个事件。@Output 装饰器允许一个组件外部的元素模板与一个组件内部的输入属性进行绑定。
-- -------------------- ---- -------
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- ------------------
--------- -
------- ---------------------------- ----------------
-
--
------ ----- -------------- -
--------- ------------ - --- -----------------------
------------- -
----------------------------- -----------
-
-<parent-component> <child-component (messageEvent)="receiveMessage($event)"></child-component> </parent-component>
二、使用 ViewChild 和 ContentChild
ViewChild 和 ContentChild 允许一个组件访问另一个组件中的元素，父组件可以获取其子组件上的 DOM 元素并根据需要执行某些操作。
1. @ViewChild
以下代码定义了一个父组件，并在子组件中使用 @ViewChild 获取子组件的引用。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - -------------- - ---- --------------------
------------
--------- -------------------
--------- -
--------- -------------
------- -------------------------- ------------------
-----------------------------------
-
--
------ ----- --------------- -
--------------------------
------- --------------- ---------------
------------- -
----------------------------------
-
-2. @ContentChild
以下代码定义了一个父组件和子组件，并使用 @ContentChild 获取子组件中的元素。
-- -------------------- ---- -------
------ - ---------- ------------- ---------------- - ---- ----------------
------------
--------- -------------------
--------- -
--------- -------------
-------------------------
-
--
------ ----- --------------- ---------- ---------------- -
---------------------------
----------- -----------
-------------------- -
------------------ -------- -------------------------------------------
-
-
------------
--------- ------------------
--------- -
-- ----------------- -------------
-
--
------ ----- -------------- --<parent-component>
<child-component>
<p #childTitle>Child Component Title</p>
</child-component>
</parent-component>三、使用服务（Service）实现组件通讯
在 Angular 中，服务是可以在所有组件之间共享的对象。在这种情况下，需要创建一个共享服务，将数据存储在这个服务中。在需要的组件中注入这个服务，并使用它来获取和更新数据。
下面代码展示了将数据存储在服务中，组件 A 和 B 中使用该服务进行通信。
定义服务：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
-------------
----------- ------
--
------ ----- ----------- -
------- ----- -------
------- ---------- - --- ------------------
----------- - -------------------------------
------------- ------- -
--------- - -----
---------------------------
-
---------- ------ -
------ ----------
-
-组件 A：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- --------------
--------- -
------- ----------------------- -------------
-
--
------ ----- ---------- -
------------------- ------------ ------------ --
--------- -
------------------------------- ---- --------- -----
-
-组件 B：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- -----------------
------------
--------- --------------
--------- -
----- ---- ------
-
--
------ ----- ---------- ---------- ------ -
----- -------
------------------- ------------ ------------ --
---------- -
------------------------------------------- -- -
--------- - -----
---
-
-四、使用路由参数实现组件通讯
在 Angular 中，可以使用路由参数来构建一些具有链接能力的组件。这种方式是父子组件之间的一种通讯方式，允许在组件之间传递信息。
假设有一个 parent 和 child 组件，它们之间有路由链接，parent 组件通过把数据作为路由参数传递给 child 组件来与 child 组件通讯。以下代码展示了如何实现这种通讯方式。
定义路由：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------- ------------ - ---- ------------------ ------ - --------------- - ---- --------------------- ------ - -------------- - ---- -------------------- ----- ------- ------ - - - ----- --- ----------- --------- ---------- ------ -- - ----- --------- ---------- --------------- -- - ----- ------------ ---------- -------------- - -- ----------- -------- ------------------------------- -------- -------------- -- ------ ----- ---------------- - -
parent 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- ------------------
------------
--------- -------------------
--------- -
------- ------------------------ -- ----- ------------------
-
--
------ ----- --------------- -
------------------- ------- ------- --
----------- -
------------------------------- - --- - ----
-
-child 组件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- ------------------
--------- -
----- -- ------
-
--
------ ----- -------------- ---------- ------ -
--- -------
------------------- ------ --------------- --
---------- -
------- - ------------------------------
-
-总结
本文讲解了 Angular 组件通讯的几种方式，包括 @Input 和 @Output、ViewChild 和 ContentChild、使用服务（Service）和使用路由参数。这些方法在具有不同的场景中都有不同的作用，学习并掌握它们可以帮助开发者更好地设计和实现组件之间的通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646a128b968c7c53b09d1bc1