Angular 是一个流行的前端框架，它提供了很多功能用于构建单页应用程序（SPA）。在 Angular 应用程序中，组件是核心构建块，组件之间的通讯是非常重要的。在 Angular 中，有两个重要的装饰器，@Input 和 @Output，用于在父组件和子组件之间进行通讯。本文将详细介绍这两个装饰器的使用方法，并提供示例代码以供参考。
@Input 装饰器
@Input 装饰器用于将数据从父组件传递给子组件。在子组件中，@Input 装饰器标注的属性将变成一个带有输入属性的绑定点。父组件可以通过这个绑定点向子组件传递数据。
------ - ---------- ----- - ---- ----------------
------------
--------- ------------------
--------- -
-----
-------- --------- -- --------- --- --------- ---- ---- --- ------ --------------
----
-----------------
----------------
-----
------
-
--
------ ----- -------------- -
-------- ----- -------
-------- ---- -------
-在子组件中，我们定义了两个属性 name 和 age，并用 @Input 装饰器标记。这样一来，父组件就可以将数据通过这些属性传递给子组件：
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
-----
---------- --------------
---
----- --- --------- ------- -- ---- ---- -- --- ----- ----------
----
-----
--------------------
------ -------------------
------
-----
-------------------
------ ------------------
------
------- ------------------------- ---- -- --------------
---------------- ------------- ------------------------------
------
-
--
------ ----- --------------- -
----- -------
---- -------
-----------
-- ---- ----- -- -- --- ---- -- ---- ----- -------
-
-在父组件中，我们定义了两个变量 name 和 age，并在模板中用 [(ngModel)] 指令绑定到两个输入框上。父组件还有一个 sendData 函数，用于向子组件传递数据。按钮的点击事件会调用这个函数，但我们还没有在该函数中实现传递数据的逻辑。最后，在父组件的模板中，我们使用子组件的标签，并将 name 和 age 作为输入属性传递给子组件。
@Output 装饰器
@Output 装饰器用于从子组件向父组件传递事件。在子组件中，我们定义一个 EventEmitter，并用 @Output 装饰器标记。父组件可以监听这个 EventEmitter，并在事件发生时执行相应的代码。下面是一个示例：
------ - ---------- ------- ------------ - ---- ----------------
------------
--------- ------------------
--------- -
-----
--------- --------------
------- ------------------------------- ---------------
------
-
--
------ ----- -------------- -
--------- ------------- ------------------ - --- ---------------
-在子组件中，我们定义了一个名为 notifyParent 的事件，并用 @Output 装饰器标记，事件类型为 EventEmitter。在子组件的模板中，我们在一个按钮的点击事件中触发这个事件。
------ - --------- - ---- ----------------
------------
--------- -------------------
--------- -
-----
---------- --------------
---------------- --------------------------------------------------------
------
-
--
------ ----- --------------- -
---------------------
------------ --------- --- -------- ------
-
-在父组件中，我们使用子组件的标签，并在其中绑定 notifyParent 事件。此时，当子组件中的按钮被点击时，notifyParent 事件将被触发。在父组件中，我们定义了一个 handleNotification 函数，当事件发生时，这个函数将被调用。
总结
@Input 和 @Output 装饰器是 Angular 中用于在父组件和子组件之间通讯的重要机制。通过 @Input 装饰器，父组件可以向子组件传递数据。通过 @Output 装饰器，子组件可以向父组件传递事件。本文介绍了这两个装饰器的使用方法，并提供了示例代码。我们希望这篇文章对你在学习 Angular 中的组件通讯有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664ffe30d3423812e41e1158