详细解释Angular2中输入和输出的用法和示例

angular2中的输入和输出可以与AngularJS中的指令进行比较。

输入相当于指令的值绑定，无论是单向的(@)还是双向的(=)。父范围的值被“输入”到子范围，然后子范围执行相关处理。

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

让我们举一个例子。我们定义一个子组件，获取父范围的数组值并以列表的形式显示它，然后在单击它时调用父组件的方法来删除元素。

//app . Component . html app-child[values]=' data '(child event)=' getChildEvent($ event)'/app-child//app . Component . ts @ Component({ selector : ' app-root '，templateUrl:)。/app.component.html '，styleurls 3360[]。/app.component.css']})导出类AppComponent { data=[1，2，3]；getChildEvent(index){ console . log(index)；this.data.splice(索引，1)；}}以上是与组件app-root关联的组件类和模板。我们可以将数据输入到子组件app-child中，然后接收childEvent事件并对其做出响应。

//app-child.component . html p * ngFOr=' let项的值；let i=index '(单击)=' Firechildevent(I)' { { item } }/p//app-child . Component . ts @ Component({ selector : ' app-child '，templateUrl: '。/child.component.html '，styleurls 3360[]。/child.component.css']})导出类ChildComponent实现OnInit { @Input()值；@ Output()childEvent=new eventemiterny()；constructor(){ } ngOnInit(){ } Firechildevent(index){ this . childevent . emit(index)；}}子组件定义值，它接收父组件的输入，这里是数据值，然后用ngFor指令显示。

单击每个元素时会触发Click事件，并执行fireChildEvent函数，该函数将元素的索引值“输出”到父组件进行处理。

输出通常是EventEmitter的一个实例，该实例的emit方法用于将参数发射到父组件中，从而触发父组件的childEvent事件。

然后父组件监听事件，执行相应的处理函数getChildEvent，删除传递的元素索引所指向的数据，并更新视图。

实际效果：

源地址：https://github。com/just for use/angular 2-demo/tree/master/angular-输入-输出

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。