Angular 2父子组件数据传递之@Input和@Output详解(下)

网络编程 2024/11/15 佚名

3 1 2

前言

之前已经给大家介绍了Angular 2父子组件数据传递之@Input和@Output的相关内容，下面这篇文章我们再进一步的进行介绍：

子组件向父组件传递数据使用事件传递是子组件向父组件传递数据最常用的方式，子组件需要实例化EventEmitter类来订阅和触发自定义事件

第一步定义子组件

childenComponent.ts

(1).实例化EventEmitter，赋值给event，event被@Output装饰器定义为输出属性，这样event具备了向上级传递数据的能力，通过调用EventEmitter类中定义的emit方法，来向上传递数据

(2).定义一个name属性，用于接受子组件页面的输入

(3).定义upward方法，用于子组件页面点击事件触发事件调用，upward()方法里面调用自定义事件event来触发emit方法传递数据

childenComponent.html

第二步定义父组件

parentComponent.ts

parentComponent.html

父组件通过绑定自定义事件event ,来订阅来自子组件触发事件（这里是点击事件），当我们点击子组件上面的按钮，调用子组件的upward()方法,内部实现会调用this.event.emit(this.name);传递数据，自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据

最终效果:表单输入数据，点击页面按钮，数据传递到父组件，在显示出来