在 Angular 中，组件是重要的构建模块。它们可以是简单的控件，也可以是更复杂的部件和应用程序的页面。在创建组件时，我们需要考虑如何与其他组件通信，例如：如何从一个组件向另一个组件传递数据，如何在这些组件之间触发事件。
Angular 为组件之间的通信提供了两种主要的方法：输入属性和输出属性。在本篇文章中，我们将介绍如何使用 @Input 和 @Output 定义输入输出属性。
@Input 输入属性
@Input 是一个装饰器，它用于定义一个输入属性。通过 @Input，我们可以将某些数据从一个组件传递到另一个组件。@Input 是一种单向绑定，也就是说，从父组件向子组件传递数据时，父组件的数据会影响子组件的数据，但子组件的数据不会影响父组件的数据。
使用 @Input 的示例代码如下：
------ - ---------- ----- - ---- ----------------
------------
--------- ------------------
--------- ----------------------------------
--
------ ----- -------------- -
-------- ------------- -------
-在上面的示例中，我们定义了一个名为 childMessage 的输入属性，它的类型是字符串类型。在子组件中，我们使用双花括号语法来绑定这个输入属性，这样就可以在子组件中展示从父组件传递来的数据。
在父组件中，我们可以使用以下方式将数据传递给子组件：
---------------- -------------------------------------------
在上面的示例中，我们使用方括号语法将 childMessage 属性绑定到父组件中的 message 变量。
@Output 输出属性
@Output 也是一个装饰器，它用于定义一个输出属性。通过 @Output，我们可以发送事件，即当某些事情发生时，通知其他组件。与 @Input 不同，@Output 是一种事件的形式，也就是说，当从子组件向父组件发送数据时，父组件的数据会受到影响，但子组件的数据不会受到影响。
使用 @Output 的示例代码如下：
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------------
--------- -------- --------------------------------------
--
------ ----- -------------- -
--------- ------------ - --- -----------------------
------------- -
----------------------------- ---- ----- -------------
-
-在上面的示例中，我们定义了一个名为 messageEvent 的输出属性，它的类型是 EventEmitter，这个类型允许我们在子组件中发送事件。sendMessage 方法用于发送消息，通过 messageEvent.emit() 方法将要发送的消息传递给父组件。
在父组件中，我们可以使用以下方式监听 messageEvent 事件：
---------------- ---------------------------------------------------------- ---------------------------
在上面的示例中，我们使用圆括号语法来监听 messageEvent 事件，并将事件绑定到 receiveMessage() 方法。当 messageEvent 事件发生时，receiveMessage() 方法会被触发，此时父组件中的 message 变量会更新。
总结
在本篇文章中，我们介绍了如何使用 @Input 和 @Output 定义输入输出属性。@Input 允许我们将数据从父组件传递到子组件，而 @Output 则允许我们从子组件向父组件发送事件。这两种属性可以让我们更方便地在组件之间进行通信和数据交换。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66519ceed3423812e4594c0f