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

站长资源 2025/1/13 佚名

63 1538 63

DDR爱好者之家 Design By 杰米

前言

之前已经给大家介绍了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来接收传递过来的数据

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

总结

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

angular,input,output,angular2,output,angularjs2,input

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

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

js 获取元素的具体样式信息getcss(实例讲解)

使用prop解决一个checkbox选中后再次选中失效的问题

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

更新日志

友情链接