今天就跟大家聊聊有关Input和Output如何在Angular2中使用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
对于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，删除传递的元素索引指向的数据，同时，视图更新。
看完上述内容，你们对Input和Output如何在Angular2中使用有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
