本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考,具体如下:
前言
在Angular开发中,我们经常会涉及到组件之间的交互,比如会引用自己部门开发的组件 有时候,我们需要向引用的组件里面绑定一些数据,或者我们需要引用的子组件输出一些数据 这时,我们就需要处理好组件之间的交互
组件交互的关键代码
父组件绑定数据到子组件
子组件
rush:js;">
{{hero.name}} says:
@input() hero: Hero;父组件
rush:js;">
myhero = "Mr.IQ";
这里子组件的@Input表示它需要hero这个实体,之后父组件引入子组件的时候,就得在子组件标签内写入hero,同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件
父组件监听子组件的事件
子组件
rush:js;">
@Output() onVoted = new EventEmitter();
Vote(agreed: boolean) { this.onVoted.emit(agreed);}
父组件
rush:js;">
Voter (myonVoted)="onVoted($event)">
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }
子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值,父组件引入子组件之后,通过把子组件的方法绑定到自己的方法上,就可以达到监听子组件的效果
setter截听输入属性值的变化
子组件
rush:js;">
'; }
get name(): string { return this._name; }
"{{name}}"
private _name = ''; @input() set name(name: string) { this._name = (name && name.trim()) || '父组件
rush:xhtml;">
父组件引用子组件之后,向子组件绑定数据,子组件通过set,get对父组件传过来的数据进行修改显示
父组件与子组件通过本地变量互动
子组件
rush:js;">
seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`; }
父组件
rush:xhtml;">