Angular 11 中如何使用 @Input 和 @Output 传递数据-JavaScript中文网-JavaScript教程资源分享门户

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