详解Angular2中Input和Output用法及示例
更新时间：2017年05月21日 14:37:42 作者：justforuse
这篇文章主要介绍了详解Angular2中Input和Output用法及示例，对于angular2中的Input和Output可以和AngularJS中指令作类比，有兴趣的可以了解一下
对于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，删除传递的元素索引指向的数据，同时，视图更新。
实际效果：
源码地址：https://github.com/justforuse/angular2-demo/tree/master/angular-input-output
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了AngularJS入门教程（一）：静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下2014-12-12
这篇文章主要给大家介绍了关于ionic3实战教程之随机布局瀑布流的实现方法，文中通过示例代码和图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
这篇文章主要介绍了angular2模块和共享模块详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了angularjs实现猜数字大小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
本文主要介绍AngularJs Scope的知识，这里整理了详细资料及示例代码，有兴趣的小伙伴可以参考下2016-09-09
当你在输入框中键入文本时,这个文本会立即反映到 testString 属性上,反之亦然,如果你在组件类中改变 testString 的值,输入框的内容也会相应更新,这篇文章主要介绍了AngularJS 的生命周期和基础语法,需要的朋友可以参考下2024-05-05
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
这篇文章主要介绍了 Bootstrap + AngularJS 实现简单的数据过滤字符查找功能，代码简单易懂，非常不错具有参考借鉴价值,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了详解使用路由延迟加载 Angular 模块,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了AngularJS的Routing路由的定义与使用,讲解了when()和otherwise()两个相关的常用方法,需要的朋友可以参考下2016-03-03
本文主要介绍AngularJS ng-csp 指令,这里对ng-csp 的基础资料的整理,并附代码实例和实现效果图,有需要的小伙伴参考下2016-08-08
最新评论