详解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 相关文章推荐
B/S开发中常用javaScript技术与代码
Mar 09 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
AngularJS路由切换实现方法分析
Mar 17 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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写的serv-u的web申请账号的程序
2006/10/09 PHP
PHP7.0版本备注
2015/07/23 PHP
php文件系统处理方法小结
2016/05/23 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
PHP实现的策略模式示例
2019/03/20 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
php array_map()函数实例用法
2021/03/03 PHP
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
Python程序中的观察者模式结构编写示例
2016/05/27 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
会议开场欢迎词
2014/01/15 职场文书
高一军训的心得体会
2014/09/01 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
语文教师求职信范文
2015/03/20 职场文书
企业百日安全活动总结
2015/05/07 职场文书
汉字听写大会观后感
2015/06/12 职场文书