Child listens for parent event in Angular 2

阅读时长 4 分钟读完

在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

纠错
反馈