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 Ajax使用 全解析
Dec 15 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
Sep 25 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 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教程孙仲岳主讲
2008/01/07 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP序列化操作方法分析
2016/09/28 PHP
用JavaScript脚本实现Web页面信息交互
2006/12/21 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python版简单工厂模式
2017/10/16 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
Python学习笔记之列表和成员运算符及列表相关方法详解
2019/08/22 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
美术师范毕业生自荐信
2013/11/16 职场文书
门卫工作岗位职责
2013/12/17 职场文书
个人简历自我评价
2014/01/06 职场文书
社区消防工作实施方案
2014/03/21 职场文书
广播体操比赛口号
2014/06/10 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技