在 Angular 2 中，组件是构建 web 应用程序的基本单位。然而，当我们需要在不同的组件之间共享数据或实现组件之间的通信时，就需要使用跨组件通讯。本文将详细介绍 Angular 2 中的跨组件通讯及其实现方式。
基础概念
在 Angular 2 中，有两种类型的组件之间的跨组件通讯：
- 父子组件之间的通讯：父组件通过属性绑定将数据传递给子组件，并通过事件绑定接收子组件的事件。
- 非父子组件之间的通讯：使用一个共享的服务来共享数据或实现组件之间的通信。
父子组件之间的通讯
属性绑定
属性绑定是将数据从父组件传递给子组件的最基本的方法。在父组件的模板中，可以使用方括号语法将数据绑定到子组件的属性上，如下所示：
<app-child [childData]="parentData"></app-child>
在子组件中，可以使用 @Input 装饰器来声明一个输入属性，该属性将接收父组件的数据，如下所示：
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------------ --------- ------------ --------- ------ --------- ------- -- ------ ----- -------------- - -------- ---------- ------- -
事件绑定
事件绑定是将子组件的事件传递给父组件的方法。在子组件的模板中，可以使用圆括号语法将事件绑定到一个输出属性上，如下所示：
<button (click)="onClick()">Click me</button>
在子组件中，可以使用 @Output 装饰器来声明一个输出属性，该属性将发出一个事件，如下所示：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------
--------- -------- ------------------------- ------------
--
------ ----- -------------- -
--------- ---------- - --- ---------------
--------- -
--------------------------- ---- ---------
-
-在父组件的模板中，可以使用圆括号语法将子组件的输出属性绑定到一个方法上，如下所示：
<app-child (childEvent)="onChildEvent($event)"></app-child>
在父组件中，可以实现 onChildEvent 方法来接收子组件的事件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -------------
--------- ----------- -------------------------------------------------
--
------ ----- --------------- -
------------------- ------- -
-------------------
-
-非父子组件之间的通讯
当需要在非父子组件之间共享数据或实现组件之间的通信时，可以使用一个共享的服务来实现。下面是一个示例：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ------- - ---- -------
-------------
------ ----- ----------- -
------- ---- - --- ------------------
---------------- ------- -
------------------------
-
--------- -
------ -------------------------
-
-在上面的示例中，我们创建了一个 DataService 服务，该服务包含一个名为 data 的私有 Subject 对象，以及两个方法：setData 和 getData。setData 方法用于将新数据发送到 data 对象中，而 getData 方法则返回一个可观察对象，以便订阅者可以获取 data 对象中的数据。
现在，我们可以在需要共享数据或实现组件之间通信的组件中注入 DataService 服务，并使用 setData 和 getData 方法来共享数据或实现通信。下面是一个示例：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ------------------
------------
--------- ------------------
--------- ------------- -- -- ---- -------
--
------ ----- ---------- ---------- ------ -
----- -------
------------------- ------------ ------------ - -
---------- -
-------------------------------------------- -- --------- - ---------
-
---------------- ------- -
----------------------------------
-
--- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------- - ---- ------------------
------------
--------- ------------------
--------- -------- ----------------------- --------------
--
------ ----- ---------- -
------------------- ------------ ------------ - -
--------- -
------------------------------- ---- --------- -----
-
-在上面的示例中，我们在组件 A 中注入了 DataService 服务，并在 ngOnInit 方法中订阅了 data 对象，以便获取来自组件 B 的新数据。同时，我们还定义了一个 setData 方法，该方法使用 setData 方法将新数据发送到 data 对象中。
在组件 B 中，我们同样注入了 DataService 服务，并定义了一个 setData 方法，该方法使用 setData 方法将新数据发送到 data 对象中。
总结
在 Angular 2 中，父子组件之间的通讯可以使用属性绑定和事件绑定来实现，而非父子组件之间的通讯则可以使用一个共享的服务来实现。掌握这些技术可以帮助我们更好地构建 Angular 2 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6563ab22d2f5e1655dd2bc4f