Angular 11 中如何使用 @Input 和 @Output 传递数据
Angular 是一款流行且强大的前端框架，由于其模块化、组件化的设计思想，使得数据传递成为其中非常重要的一环。在 Angular 中，使用 @Input 和 @Output 装饰器来实现组件之间的通信是非常常见的做法。本文将深入讲解 @Input 和 @Output 的使用方法，并示范代码来更好地帮助各位理解。
@Input 装饰器
@Input 装饰器用于在父组件中向子组件中传入数据，使得子组件可以使用父组件中的数据。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- ---
------------
--------- -------------------
--------- -
---------------- ----------------------------------------
--
--
------ ----- --------------- -
---------- - -----------
-
-- ---
------------
--------- ------------------
--------- -
----- ------ ------
--
--
------ ----- -------------- -
-------- ------- -------
-在父组件中，我们声明了一个 parentData 变量，并将其传递给子组件 child-component，子组件中使用 @Input 装饰器声明了一个 myData 属性，与父组件内传递的 myData 属性绑定，从而实现传递数据。
此外，@Input 装饰器也可以实现双向数据绑定。例如：
-- -------------------- ---- -------
-- ---
------------
--------- -------------------
--------- -
---------------- ------------------------------------------
--
--
------ ----- --------------- -
---------- - -----------
-
-- ---
------------
--------- ------------------
--------- -
------ ----------- ---------------------
--
--
------ ----- -------------- -
-------- ------- -------
--------- ------------ - --- -----------------------
----------------------- ------- -
----------- - ---------
---------------------------------
-
-在父组件中使用了双向数据绑定 [(myData)]="parentData"，在子组件中使用 @Output 装饰器声明了一个 myDataChange 事件，当子组件中的输入框值发生改变时，触发 onInputChange 方法，更新 myData 属性值，并通过 myDataChange 事件将新的值返回到父组件，从而实现双向数据绑定。
@Output 装饰器
@Output 装饰器用于在子组件中向父组件中传递数据，使得父组件可以获取子组件中的数据。下面是一个示例代码：
-- -------------------- ---- -------
-- ---
------------
--------- -------------------
--------- -
---------------- --------------------------------------------------------
------------- ---------- ------
--
--
------ ----- --------------- -
----------- -------
----------------------- ------- -
--------------- - ---------
-
-
-- ---
------------
--------- ------------------
--------- -
------ ----------- --------------------------------
--
--
------ ----- -------------- -
--------- ----------- - --- -----------------------
-------------------- ---- -
----- -------- - -------------------
--------------------------------
-
-在子组件中，我们使用 @Output 装饰器声明了一个 inputChange 事件，当子组件中的输入框值发生改变时，触发 onInputChange 方法，并通过 inputChange 事件将新的值发送到父组件。在父组件中，我们使用 (inputChange)="onInputChange($event)" 来监听子组件的 inputChange 事件，并在回调函数中获取子组件传过来的值，从而实现数据传递。
总结
本文讲解了在 Angular 11 中使用 @Input 和 @Output 装饰器传递数据的方法，以及能够使用双向数据绑定和事件绑定实现双向数据流的方法。我们需要在父组件中使用 @Input 装饰器声明一个属性，将其传递给子组件；在子组件中使用 @Input 装饰器声明一个与父组件中属性绑定的属性，从而接收传递来的数据。如果需要实现双向数据绑定，我们还需要使用 @Output 装饰器声明一个事件，并在子组件中触发该事件传递数据回父组件。通过这些方法，我们可以在 Angular 应用程序中实现组件间的数据通信，从而更好地开发出更为强大的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ae8341add4f0e0ff80ce10