在Angular 2中，组件是构建用户界面的基本单元，它们之间需要进行数据交换以实现复杂的交互。Angular提供了@Input和@Output装饰器，使得父子组件间的数据传递变得简单且直观。下面我们将深入探讨这两个装饰器的工作原理以及如何使用它们。
**一、@Input：父组件向子组件传递数据**
1. **定义父组件（ParentComponent）**
在`ParentComponent.ts`中，我们首先创建一个包含数据的类属性，如`user`和`parent_data`。然后，我们创建一个名为`next()`的方法，该方法用于更新`parent_data`的值，通常是由用户在父组件的视图（HTML）中触发的事件所调用。例如，当用户在表单中输入数据并点击按钮时，`next()`会被调用，将输入数据赋值给`parent_data`。
```typescript
export class ParentComponent {
user = '';
parent_data = '';
next() {
this.parent_data = this.user;
}
}
```
在`ParentComponent.html`中，我们可以设置一个表单用于输入数据，并创建一个按钮，点击时调用`next()`方法。
```html
<input [(ngModel)]="user">
<button (click)="next()">传递数据</button>
<child-component [data]="parent_data"></child-component>
```
这里的`[data]="parent_data"`是使用@Input绑定，将`parent_data`的值传递给子组件。
2. **定义子组件（ChildComponent）**
在`ChildComponent.ts`中，我们需要定义一个类属性`data`，并使用@Input装饰器标记它，使其能够接收父组件传递过来的值。
```typescript
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'child-component',
template: `
<div>子组件接收到的数据: {{ data }}</div>
`
})
export class ChildComponent implements OnChanges {
@Input() data;
ngOnChanges(changes: SimpleChanges) {
if (changes['data']) {
console.log('新数据:', changes['data'].currentValue);
}
}
}
```
子组件的模板中显示接收到的`data`值。同时，我们实现了`OnChanges`接口，并重写了`ngOnChanges()`方法，用于监听`data`属性的变化。当父组件传递的新数据到来时，`ngOnChanges()`会被调用，打印出新的数据到控制台。
**二、总结**
Angular 2的@Input和@Output装饰器为组件间的通信提供了便利。@Input用于从父组件向子组件传递数据，而@Output则用于从子组件向父组件发送事件和数据。在这个例子中，我们仅讨论了@Input的使用，它允许父组件通过属性绑定将数据注入子组件。子组件通过实现`OnChanges`接口，可以监听到这些数据的变化，从而做出相应的响应。这种数据传递机制确保了组件的独立性和可复用性，是Angular框架设计的核心之一。
