详解Angular2中Input和Output用法及示例

详解Angular 2中的Input和Output：值的传递与事件的响应（附带示例）

在Angular的世界里，我们可以将Angular 2中的Input和Output与AngularJS中的指令进行类比。理解这两者的运作方式对于理解Angular组件间的交互至关重要。

一、Input（输入属性）

Input相当于指令的值绑定。无论是单向的(@)还是双向的(=)，都是将父作用域的值“输入”到子作用域中，子作用域可以对这些值进行处理和展示。这种数据流动是单向的，也就是说，子组件不能直接修改从父组件接收到的值。

让我们通过一个简单的例子来展示Input的用法：

在父组件中，我们有一个名为data的数组，我们希望将这个数组传递给子组件app-child进行展示。我们可以这样做：

``

在子组件中，我们可以使用@Input装饰器来接收这个值：

`@Input() values;`

然后，我们可以在组件的模板中使用这个值来显示列表。例如：

`

{{item}}

二、Output（输出属性）

Output相当于指令的方法绑定。当子作用域中的某些事件发生时，可以触发事件并调用父作用域中的方法处理该事件。这是通过子组件发出事件并将数据传递回父组件来实现的。这种数据流动是双向的，子组件可以通知父组件事件的发生并传递数据。

同样以我们的例子来说明：在子组件的模板中，我们为每一个元素添加了一个点击事件，当点击某个元素时，我们希望删除这个元素。我们可以这样做：

`

{{item}}

在子组件中，我们定义一个名为childEvent的EventEmitter实例来触发事件：

`@Output() childEvent = new EventEmitter();`

然后，在点击事件的处理器中，我们调用EventEmitter的emit方法来触发事件并传递数据：

`fireChildEvent(index){ this.childEvent.emit(index); }`

在父组件中，我们可以监听这个事件并定义相应的处理方法来处理这个事件：