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

大佬教程收集整理的这篇文章主要介绍了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.@R_696_8313@;传递数据，自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对菜鸟教程的支持。

大佬总结

以上是大佬教程为你收集整理的Angular 2父子组件数据传递之@Input和@Output详解(下)全部内容，希望文章能够帮你解决Angular 2父子组件数据传递之@Input和@Output详解(下)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。