详解Angular2中Input和Output用法及示例


Posted in Javascript onMay 21, 2017

对于angular2中的Input和Output可以和AngularJS中指令作类比。

Input相当于指令的值绑定,无论是单向的(@)还是双向的(=)。都是将父作用域的值“输入”到子作用域中,然后子作用域进行相关处理。

Output相当于指令的方法绑定,子作用域触发事件执行响应函数,而响应函数方法体则位于父作用域中,相当于将事件“输出到”父作用域中,在父作用域中处理。

看个angular2示例吧,我们定义一个子组件,获取父作用域的数组值并以列表形式显示,然后当点击子组件的元素时调用父组件的方法将该元素删除。

//app.component.html
<app-child [values]="data" (childEvent) = "getChildEvent($event)">
</app-child>

//app.component.ts
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 data = [1,2,3];

 getChildEvent(index){
  console.log(index);
  this.data.splice(index,1);
 }
}

以上是跟组件app-root的组件类及模板,可以我们把data输入到子组件app-child中,然后接收childEvent事件并对其进行响应。

//app-child.component.html
<p *ngFor="let item of values; let i = index" (click)="fireChildEvent(i)">
 {{item}}
</p>


//app-child.component.ts
@Component({
 selector: 'app-child',
 templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 @Input() values;
 @Output() childEvent = new EventEmitter<any>();
 constructor() { }

 ngOnInit() {

 }
 fireChildEvent(index){
  this.childEvent.emit(index);
 }
}

子组件定义了values接收了父组件的输入,这里就是data值,然后使用ngFor指令显示。

当点击每个元素的时候触发了click事件,执行fireChildEvent函数,该函数要将元素的index值“输出”到父组件中进行处理。

Output一般都是一个EventEmitter的实例,使用实例的emit方法将参数emit到父组件中,触发父组件的childEvent事件。

然后父组件监听到该事件的发生,执行对应的处理函数getChildEvent,删除传递的元素索引指向的数据,同时,视图更新。

实际效果:

详解Angular2中Input和Output用法及示例

源码地址:https://github.com/justforuse/angular2-demo/tree/master/angular-input-output

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
jQuery中animate动画第二次点击事件没反应
May 07 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS中数组重排序方法
Nov 11 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 #Javascript
详解angularjs利用ui-route异步加载组件
May 21 #Javascript
如何在AngularJs中调用第三方插件库
May 21 #Javascript
详解Angular-Cli中引用第三方库
May 21 #Javascript
Angular2安装angular-cli
May 21 #Javascript
Angular2使用Augury来调试Angular2程序
May 21 #Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 #Javascript
You might like
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
写的htc的数据表格
2007/01/20 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
基于Javascript实现弹出页面效果
2016/01/01 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
通过js修改input、select默认字体颜色
2017/04/19 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
nodejs多版本管理总结
2018/04/03 NodeJs
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
Python字符转换
2008/09/06 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
Python程序暂停的正常处理方法
2019/11/07 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python实现udp传输图片功能
2020/03/20 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python线程里哪种模块比较适合
2020/08/02 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
一位农村小子的自荐信
2014/04/07 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
指导老师鉴定意见
2015/06/05 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL