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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
javascript删除数组重复元素的方法汇总
Jun 24 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
Jun 24 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
详解ECMAScript2019/ES10新属性
Dec 06 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
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
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
PHP defined()函数的使用图文详解
2019/07/20 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
pytorch masked_fill报错的解决
2020/02/18 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国宠物商店:Wag.com
2016/10/25 全球购物
调解员先进事迹材料
2014/02/07 职场文书
民事诉讼代理词
2015/05/25 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Python函数对象与闭包函数
2022/04/13 Python
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python