如何推广小程序_Angular2完成组件交互的方法分析

日期:2021-01-11 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

Angular2实现组件交互的方法分析     -李鑫超   这篇文章主要介绍了Angular2实现组件交互的方法,结合实例形式总结分析了Angular2中组件交互的相关操作技巧与注意事项,需要的朋友可以参考下

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

前言

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

组件交互的关键代码

父组件绑定数据到子组件

子组件

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

父组件

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

,就得在子组件标签内写入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 this.agreed++ : this.disagreed++; }

,通过把子组件的方法绑定到自己的方法上,就可以达到监听子组件的效果

setter截听输入属性值的变化

子组件

 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 {{timer.seconds}} /div 
 countdown-timer #timer /countdown-timer 

子组件定义了变量和方法,父组件引用子组件标签之后,通过在标签建立本地变量来代表子组件,然后通过变量就可以实现访问子组件的变量和方法

小结

组件交互是经常用到的知识,需要熟练掌握
还有其它交互方式,比如生命周期、服务,遇到了可以继续深入研究

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《》

希望本文所述对大家AngularJS程序设计有所帮助。