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


Posted in Javascript onDecember 19, 2017

本文实例讲述了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 ? this.agreed++ : this.disagreed++; }

子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值,父组件引入子组件之后,通过把子组件的方法绑定到自己的方法上,就可以达到监听子组件的效果

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

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

小结

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

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

Javascript 相关文章推荐
jquery validator 插件增加日期比较方法
Feb 21 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
Dec 19 #Javascript
jquery自定义显示消息数量
Dec 19 #jQuery
基于Vue开发数字输入框组件
Dec 19 #Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
从setTimeout看js函数执行过程
Dec 19 #Javascript
mongoose更新对象的两种方法示例比较
Dec 19 #Javascript
jquery中done和then的区别(详解)
Dec 19 #jQuery
You might like
十天学会php之第九天
2006/10/09 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
2016/08/03 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python函数局部变量用法实例分析
2015/08/04 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
django自定义模板标签过程解析
2019/12/14 Python
python中字典增加和删除使用方法
2020/09/30 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
爱情保证书范文
2014/02/01 职场文书
教师自我剖析材料
2014/09/29 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
英文版辞职信
2015/02/28 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
民事调解协议书
2016/03/21 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python