Angular2如何实现组件交互-创新互联
这篇文章主要为大家展示了“Angular2如何实现组件交互”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Angular2如何实现组件交互”这篇文章吧。
创新互联建站为您提适合企业的网站设计 让您的网站在搜索引擎具有高度排名，让您的网站具备超强的网络竞争力！结合企业自身，进行网站设计及把握，最后结合企业文化和具体宗旨等，才能创作出一份性化解决方案。从网站策划到
成都网站设计、成都网站制作， 我们的网页设计师为您提供的解决方案。
前言
在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件
有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据
这时，我们就需要处理好组件之间的交互
组件交互的关键代码
父组件绑定数据到子组件
子组件
{{hero.name}} says:
@Input() hero: Hero;
父组件
myhero = "Mr.IQ";
这里子组件的@Input表示它需要hero这个实体，之后父组件引入子组件的时候，就得在子组件标签内写入hero，同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件
父组件监听子组件的事件
子组件
Agree
@Output() onVoted = new EventEmitter();
vote(agreed: boolean) { this.onVoted.emit(agreed);}
父组件
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }
子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值，父组件引入子组件之后，通过把子组件的方法绑定到自己的方法上，就可以达到监听子组件的效果
setter截听输入属性值的变化
子组件
"{{name}}"
private _name = '';
@Input()
set name(name: string) { this._name = (name && name.trim()) || ''; }
get name(): string { return this._name; }
父组件
父组件引用子组件之后，向子组件绑定数据，子组件通过set，get对父组件传过来的数据进行修改显示
父组件与子组件通过本地变量互动
子组件
seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`; }父组件
Stop
{{timer.seconds}}
子组件定义了变量和方法，父组件引用子组件标签之后，通过在标签建立本地变量来代表子组件，然后通过变量就可以实现访问子组件的变量和方法
以上是“Angular2如何实现组件交互”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
文章标题：Angular2如何实现组件交互-创新互联
URL分享：http://csdahua.cn/article/ihcgo.html
