Angular 2TypeScript：@Input@output 还是输入输出

typescript

Angular 2/typescript：@Input/@Output 还是输入/输出？

在Angular 2中，我们可以使用@Input和@Output装饰器来实现组件之间的数据传递。这两个装饰器提供了一种简单而强大的方式来处理父组件向子组件传递数据（输入）和子组件向父组件传递数据（输出）。在本文中，我们将讨论@Input和@Output装饰器的使用，以及它们与输入和输出的关系。

使用@Input装饰器实现组件之间的数据传递

@Input装饰器允许父组件向子组件传递数据。通过在子组件的属性前添加@Input装饰器，我们可以将该属性暴露给父组件，使父组件能够将数据传递给子组件。下面是一个简单的示例代码：

typescript
// 子组件
import { Component, Input } from '@angular/core';
@Component({
  selector: 'child-component',
  template: '
{{message}}
'
})
export class ChildComponent {
  @Input() message: string;
}
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'parent-component',
  template: '<child-component [message]="parentMessage"></child-component>'
})
export class ParentComponent {
  parentMessage: string = 'Hello from parent component';
}

在上面的代码中，我们定义了一个父组件和一个子组件。子组件中的message属性使用@Input装饰器，以便从父组件接收数据。父组件中，我们通过属性绑定将parentMessage的值传递给子组件的message属性。子组件接收到父组件传递的数据后，就可以在模板中显示出来。

使用@Output装饰器实现组件之间的数据传递

@Output装饰器允许子组件向父组件传递数据。通过在子组件的事件前添加@Output装饰器，我们可以将该事件暴露给父组件，使父组件能够监听并处理子组件触发的事件。下面是一个简单的示例代码：

typescript
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'child-component',
  template: '<button (click)="sendMessage()">Send Message</button>'
})
export class ChildComponent {
  @Output() messageEvent = new EventEmitter<string>();
  sendMessage() {
    this.messageEvent.emit('Hello from child component');
  }
}
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'parent-component',
  template: '<child-component (messageEvent)="receiveMessage($event)"></child-component>
{{message}}
'
})
export class ParentComponent {
  message: string;
  receiveMessage(message: string) {
    this.message = message;
  }
}

在上面的代码中，我们定义了一个父组件和一个子组件。子组件中的sendMessage方法使用@Output装饰器和EventEmitter来触发一个名为messageEvent的事件，并将消息作为参数传递给父组件。父组件中，我们使用事件绑定来监听子组件触发的messageEvent事件，并在receiveMessage方法中处理接收到的消息。

通过使用@Input和@Output装饰器，我们可以非常方便地在Angular 2中实现组件之间的数据传递。@Input装饰器用于将数据从父组件传递给子组件，而@Output装饰器用于将数据从子组件传递给父组件。这种方式简洁而强大，使得组件之间的通信变得更加灵活和可靠。