详解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 相关文章推荐
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
简单的Jquery全选功能
Nov 07 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 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
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
php设计模式之单例模式使用示例
2014/01/20 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
浅析php原型模式
2014/11/25 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python读取键盘输入的2种方法
2015/06/16 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python对execl 处理操作代码
2020/06/22 Python
PyQt实现计数器的方法示例
2021/01/18 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
佳能法国商店:Canon法国
2019/02/14 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
List、Map、Set三个接口,存取元素时,各有什么特点?
2015/09/27 面试题
护士的自我鉴定
2014/02/07 职场文书
幼儿园母亲节活动方案
2014/03/10 职场文书
同学聚会邀请函
2015/01/30 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
SpringBoot快速入门详解
2021/07/21 Java/Android
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL