Angular2父子组件之间数据传递:@Input和@Output (下) 2017-07-09 17:04 4人阅读 评论(0) 收藏
为了让大家学习起来轻松、易懂,小编尽量做到篇幅短,语言通俗易懂,知识点分段来讲,以免太长了看起来很累,也很容易失去耐心阅读下去,希望大家理解和支持,同时希望大家点赞和分享出去,让更多的志同道合的朋友来学习
子组件向父组件传递数据
使用事件传递是子组件向父组件传递数据最常用的方式,子组件需要实例化EventEmitter类来订阅和触发自定义事件
第一步定义子组件
childenComponent.ts(子组件)
import {Component, Output, EventEmitter} from '@angular/core';
@Component({
selector: 'app-childen',
templateUrl: './childen.component.html',
styleUrls: ['./childen.component.css']
})
export class ChildenComponent
{
@Output() event = new EventEmitter();
private name: string;
upward() {
this.event.emit(this.name);
}
}
(1).实例化EventEmitter,赋值给event,event被@Output装饰器定义为输出属性,这样event具备了向上级传递数据的能力,通过调用EventEmitter类中定义的emit方法,来向上传递数据
(2).定义一个name属性,用于接受子组件页面的输入
(3).定义upward方法,用于子组件页面点击事件 触发事件调用,upward()方法里面调用自定义事件event来触发emit方法 传递数据
childenComponent.html(子组件模版)
<div class="childen-box">
<p>子组件</p>
<div>
<label>姓名:</label><input type="text" [(ngModel)]="name">
<input type="button" (click)="upward()" value="传递数据给父组件">
</div>
</div>
第二步定义父组件
parentComponent.ts(父组件)
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
private parent_name: string;
getData(event) {
this.parent_name = event;
}
}
parentComponent.html(父组件模版)
<div class="parent_div">
<p>父组件</p>
<div>
接收子组件数据:{{parent_name}}
</div>
<!---子组件指令 start-->
<app-childen (event)="getData($event)"></app-childen>
<!---子组件指令 end-->
</div>
父组件通过绑定自定义事件event ,来订阅来自子组件触发事件(这里是点击事件),当我们点击子组件上面的按钮,调用子组件的upward()方法,内部实现会调用this.event.emit(this.name);传递数据,自此父组件就能够监听自定义事件event。调用getData来接收传递过来的数据
最终效果:表单输入数据,点击页面按钮,数据传递到父组件,在显示出来
<完>
个人学习心得,大神路过,不喜勿喷