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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
jquery常用的12个小功能
Jul 22 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
JsDom 编程小结
2011/08/09 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
简明 Python 基础学习教程
2007/02/08 Python
如何用python整理附件
2018/05/13 Python
PyCharm代码格式调整方法
2018/05/23 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
小学老师寄语大全
2014/04/04 职场文书
家长写给孩子的评语
2014/04/18 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
小学优秀学生评语
2014/12/29 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL