Angular中父子组件间如何实现数据双向传递？

本文共计973个文字，预计阅读时间需要4分钟。

Angular中父子组件间如何传递数据？

下面本篇章将介绍如何在Angular中实现父子组件间的数据传递，包括：

1. 父组件向子组件传递数据

2.子组件向父组件传递数据

希望对大家有所帮助！

环境：Angular CLI: 11.0.6 Angular: 11.0.x

Angular中父子组件间怎么传递数据？下面本篇文章就来给大家介绍一下Angular中父组件向子组件传数据、子组件向父组件传数据的方法，希望对大家有所帮助！

环境:

• Angular CLI: 11.0.6
• Angular: 11.0.7
• Node: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio Code

组件之间传递数据，最主要的就是父子组件之间传递数据， 例如：

<parent-component> <child-component></child-component> </parent-component>

父组件传入数据给子组件，同时，子组件数据发生变化是，希望能够通知父组件。

Angular 中，@Input() 和 @Output() 为子组件提供了一种与其父组件通信的方法。 @Input() 允许父组件更新子组件中的数据。相反，@Output() 允许子组件向父组件发送数据。