Angular 中如何使用 Input 和 Output
Angular 是一种现代化的前端框架，其有很多实用的功能，其中 Input 和 Output 是两个非常重要的概念。本文将重点介绍如何在 Angular 中正确地使用 Input 和 Output。
Input
Input 指的是将一个组件的数据传递到另一个组件中。这里可以将一个组件理解为子组件，另一个组件理解为父组件。
如何声明 Input
在子组件中声明 Input，需要使用 @Input() 装饰器，例如：
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------------
--------- ------------------
--------- -
------- ---------- --------
-
--
------ ----- -------------- -
-------- ----------- -------
-在父组件中，使用以下方式将数据传递到子组件中：
<child-component [childTitle]="parentTitle"></child-component>
这里的 parentTitle 是父组件中的属性，绑定方式使用了方括号 []。在子组件中使用的 Input 属性名称是 childTitle。
Input 中的变更检测
在父组件中，如果 Input 绑定的数据发生了变化，Angular 会自动检测并更新子组件中的数据。例如下面的代码：
<child-component [childTitle]="parentTitle"></child-component>
这里假设 parentTitle 的值变化了，那么子组件中的 childTitle 也会跟着变化。
Output
Output 指的是将一个事件从子组件传递到父组件。这里可以将一个组件理解为子组件，另一个组件理解为父组件。
如何声明 Output
在子组件中声明 Output，需要使用 @Output() 装饰器，例如：
-- -------------------- ---- -------
------ - ---------- ------------- ------ - ---- ----------------
------------
--------- ------------------
--------- -
------- ------------------------- ------------
-
--
------ ----- -------------- -
--------- -------- --------------------- - --- ------------------------
--------- -
------------------------
-
-在父组件中，使用以下方式接收子组件中的事件：
<child-component (clicked)="handleClick($event)"></child-component>
这里的 handleClick 是父组件中的一个方法，$event 是子组件中传递的数据。
Output 中的变更检测
在子组件中使用 Output 触发事件后，应用中的其他组件都应该被通知并更新。Angular 使用了 zone.js，能够检测到这个变化并自动更新父组件中的数据。
示例代码
下面是一个完整的示例代码，演示了如何在子组件中使用 Input 和 Output。
-- -------------------- ---- -------
------ - ---------- ------------- ------ ------ - ---- ----------------
------------
--------- ------------------
--------- -
------- ---------- --------
------- ------------------------- ------------
-
--
------ ----- -------------- -
-------- ----------- -------
--------- -------- --------------------- - --- ------------------------
--------- -
------------------------
-
-
------------
--------- -------------------
--------- -
---------------- -------------------------- --------------------------------------------------
------- ------------------------------ --------------
-
--
------ ----- --------------- -
------------ ------ - ------- -------
------------------ -------- -
----------------------- -------
-
------------- -
---------------- - ---- ------ -------
-
-在这个例子中，当父组件中的按钮被点击时，将会触发子组件中的事件，并且在控制台中输出 clicked:true。同时，当父组件中的按钮被点击时，子组件中的变量也会随之变化。
总结
Input 和 Output 是 Angular 中非常实用的概念，能够帮助我们有效地传递数据和事件。在使用它们时，需要注意一些细节，例如变更检测等。希望本文对你有所帮助，同时欢迎大家在评论区留言提出问题和建议。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a661e48841e989488994b