前言

之前已经给大家介绍了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  # angularjs2  # 详解Angular 4.x 动态创建组件  # Angular 2父子组件数据传递之@ViewChild获取子组件详解  # Angular2学习教程之组件中的DOM操作详解  # angular中不同的组件间传值与通信的方法  # Angular父组件调用子组件的方法  # Angular5给组件本身的标签添加样式class的方法  # Angular入口组件（entry component）与声明式组件的区别详解  # angular2倒计时组件使用详解  # 详解angular2封装material2对话框组件  # 简单谈谈Angular中的独立组件的使用  # 自定义  # 这篇文章  # 相关内容  # 给大家  # 当我们  # 谢谢大家  # 表单  # 第二步  # 绑定  # 最常用  # 来向  # 类中  # 具备了  # 有疑问  # color  # style  # EventEmitter  # strong  # span 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： laravel服务容器和依赖注入怎么理解_laravel服务容器与依赖注入解析  Laravel路由Route怎么设置_Laravel基础路由定义与参数传递规则【详解】  如何用狗爹虚拟主机快速搭建网站？  Win11怎么关闭专注助手 Win11关闭免打扰模式设置【操作】  微信小程序 闭包写法详细介绍  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  如何获取PHP WAP自助建站系统源码？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  如何自定义建站之星模板颜色并下载新样式？  网站设计制作书签怎么做,怎样将网页添加到书签/主页书签/桌面？  阿里云网站搭建费用解析：服务器价格与建站成本优化指南  Laravel如何使用Service Container和依赖注入？（代码示例）  如何在万网自助建站平台快速创建网站？  制作企业网站建设方案,怎样建设一个公司网站？  如何在Windows 2008云服务器安全搭建网站？  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  网站制作壁纸教程视频,电脑壁纸网站？  Laravel如何使用查询构建器？（Query Builder高级用法）  昵图网官网入口 昵图网素材平台官方入口  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  独立制作一个网站多少钱,建立网站需要花多少钱？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  node.js报错：Cannot find module 'ejs'的解决办法  千库网官网入口推荐 千库网设计创意平台入口  javascript如何操作浏览器历史记录_怎样实现无刷新导航  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  canvas 画布在主流浏览器中的尺寸限制详细介绍  浅述节点的创建及常见功能的实现  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  在Oracle关闭情况下如何修改spfile的参数  Laravel定时任务怎么设置_Laravel Crontab调度器配置  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  如何在云服务器上快速搭建个人网站？  Laravel任务队列怎么用_Laravel Queues异步处理任务提升应用性能  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  英语简历制作免费网站推荐,如何将简历翻译成英文？  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  深圳网站制作公司好吗,在深圳找工作哪个网站最好啊？  大学网站设计制作软件有哪些,如何将网站制作成自己app？  香港服务器如何优化才能显著提升网站加载速度？  IOS倒计时设置UIButton标题title的抖动问题  百度浏览器网页无法复制文字怎么办 百度浏览器复制修复  Laravel如何自定义分页视图？（Pagination示例）  如何批量查询域名的建站时间记录？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？