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.name);传递数据,自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据

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

总结

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

时间: 2017-07-02

详解Angular2中Input和Output用法及示例

对于angular2中的Input和Output可以和AngularJS中指令作类比. Input相当于指令的值绑定,无论是单向的(@)还是双向的(=).都是将父作用域的值"输入"到子作用域中,然后子作用域进行相关处理. Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件"输出到"父作用域中,在父作用域中处理. 看个angular2示例吧,我们定义一个子组件,获取父作用域的数组值并以列表形式显示,然后当点击

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

前言 为了让大家学习起来轻松.易懂,小编尽量做到篇幅短,语言通俗易懂,知识点分段来讲,以免太长了看起来很累,也很容易失去耐心阅读下去,希望大家理解和支持,同时希望大家点赞和分享出去,让更多的志同道合的朋友来学习 Angular 提供了@Input和@Output语法来处理组件数据的流入流出,接下来我们通过@Input和@Output来演示父子组建之间的数据传递 父组件向子组件传递数据 父组件传递数据到子组件通过@Input方式的现实方式 第一步:定义父组件 ParentComponent.ts

Angular2 组件间通过@Input @Output通讯示例

本文介绍了Angular2 组件间通过@Input @Output通讯示例,分享给大家,具体如下: 父组件传给子组件: 子组件设置@Input属性,父组件即可通过设置html属性给子组件传值. 子组件: @Input() title:string; _name:string = ''; @Input() set name(name:string) { this._name=(name&&name.trim())||''; } 上面的代码设置了两个可供父组件传入的属性:title和name,

angular2 ng2 @input和@output理解及示例

angular2 @input和@output理解 先做个比方,然后奉上代码 比如: <talk-cmp [talk]="someExp" (rate)="eventHandler($event.rating)"> input, [talk]="someExp" 这个标签可以理解为一个专门的监听器,监听父组件传递过来的someExp参数,并存入自身组件的talk变:好像是开了个后门,允许且只允许父组件的someExp进入,一旦进入立刻

java中的Io(input与output)操作总结(一)

所谓IO,也就是Input与Output的缩写.在java中,IO涉及的范围比较大,这里主要讨论针对文件内容的读写 其他知识点将放置后续章节(我想,文章太长了,谁都没耐心翻到最后) 对于文件内容的操作主要分为两大类 分别是: 字符流 字节流 其中,字符流有两个抽象类:Writer Reader 其对应子类FileWriter和FileReader可实现文件的读写操作 BufferedWriter和BufferedReader能够提供缓冲区功能,用以提高效率 同样,字节流也有两个抽象类:Input

angular实现input输入监听的示例

最近做用户注册登录时,需要监控用户的输入以此来给用户提示,用到了angular的$watch功能,以下是例子: jsp: <form class="register ng-scope" ng-app="regist_app" onsubmit="registSumbitValid()" ng-controller="regist_control"> <div class="item">

Angular2.0实现modal对话框的方法示例

本文实例讲述了Angular2.0实现modal对话框的方法.分享给大家供大家参考,具体如下: 觉得写的比较巧妙的就是样式的选取~记录下 CSS部分 .font { font-family: "Microsoft YaHei", Arial; font-size: 12px; color: #333333; } .ky-modal-content { min-width: 520px; min-height: 240px; } .ky-modal-header { /*height :

js 获取、清空input type=&quot;file&quot;的值(示例代码)

上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: <html>

js 获取、清空input type="file"的值示例代码

上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: &l

angular2路由切换改变页面title的示例代码

angular2里默认切换路由或者切换组件,页面的title是不会变化的. angular2在路由设置里提供了data参数可以传值,如下 { path: 'home', component: HomeComponent, data: { title: 'Home', aaa: 'aaaa', bbb: 'bbbb', ccc: "cccc"} } path和component是常用的属性,path是地址栏的显示,component是调用的组件. data则可以传数据,在组件内可以调用.