Angular2实现组件交互的方法分析

(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )

本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考，具体如下：

前言

在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件
有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据
这时，我们就需要处理好组件之间的交互

组件交互的关键代码

父组件绑定数据到子组件

子组件

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

父组件

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

这里子组件的@Input表示它需要hero这个实体，之后父组件引入子组件的时候，就得在子组件标签内写入hero，同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件

父组件监听子组件的事件

子组件

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

父组件

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed "htmlcode">

<h3>"{{name}}"</h3>
private _name = '';
@Input()
set name(name: string) { this._name = (name && name.trim()) || '<no name set>'; }
get name(): string { return this._name; }




父组件


<name-child [name]="myname"></name-child>




父组件引用子组件之后，向子组件绑定数据，子组件通过set，get对父组件传过来的数据进行修改显示
父组件与子组件通过本地变量互动
子组件


seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }




父组件


<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>




子组件定义了变量和方法，父组件引用子组件标签之后，通过在标签建立本地变量来代表子组件，然后通过变量就可以实现访问子组件的变量和方法
小结
组件交互是经常用到的知识，需要熟练掌握

还有其它交互方式，比如生命周期、服务，遇到了可以继续深入研究
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。

上一篇：js解决软键盘遮挡输入框的问题分享
下一篇：浅谈gulp创建完整的项目流程