在Angular 2中，父子组件之间的通信是非常常见的。通常情况下，父组件通过@Output将事件发射到子组件，而子组件通过@Input接收数据。但是有时候，我们需要在子组件中监听从父组件发射的事件。本文将详细介绍如何在子组件中监听父组件发射的事件，并提供示例代码和指导意义。
父组件发射事件到子组件
首先，让我们来看一下父组件如何发射事件到子组件。假设我们有一个名为parent-component的父组件，它有一个按钮。当用户点击按钮时，父组件会发射一个名为myEvent的事件，并传递一个值hello from parent。示例代码如下：
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- -------------------
--------- -
------- ------------------------- -----------
--
--
------ ----- --------------- -
--------- ------- - --- -----------------------
--------- -
------------------------ ---- ---------
-
-在上面的代码中，我们使用了@Output装饰器创建了一个名为myEvent的事件，并在onClick方法中使用emit方法发射了该事件。
现在，我们需要在子组件中监听这个事件。
子组件监听父组件事件
要在子组件中监听父组件发射的事件，我们需要使用@ViewChild装饰器来获取父组件的实例，并订阅该实例上的事件。假设我们有一个名为child-component的子组件，它希望监听parent-component发射的myEvent事件。示例代码如下：
------ - ---------- ---------- ------------- - ---- ----------------
------ - --------------- - ---- ---------------------
------------
--------- ------------------
--------- -
----- ------- ------
--
--
------ ----- -------------- ---------- ------------- -
--------------------------- -------- ----------------
------- - ---
----------------- -
------------------------------------ ------- -- -
------------ - -----
---
-
-在上面的代码中，我们首先使用@ViewChild装饰器获取了父组件ParentComponent的实例，并将其赋值给了parent属性。然后，在ngAfterViewInit生命周期钩子中，我们订阅了parent实例上的myEvent事件，并在回调函数中将接收到的数据赋值给了message属性。
这样，当父组件发射myEvent事件时，子组件就能够收到该事件，并更新自己的状态。
指导意义
通过本文，我们学习了如何在子组件中监听父组件发射的事件。这种通信方式可以帮助我们实现更复杂的组件间交互，提高应用程序的可维护性和扩展性。
但是需要注意的是，父子组件之间的通信应该尽可能少。如果组件之间有太多的通信，就会导致应用程序变得复杂难以理解和维护。因此，在设计组件时，应该遵循单一职责原则，并尽量将组件设计为独立的、可重用的部件。
结论
在Angular 2中，我们可以使用@Output和@ViewChild装饰器来实现父子组件之间的通信。父组件通过@Output发射事件到子组件，而子组件通过@ViewChild获取父组件的实例并订阅
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29338