Angular2中@Input和@Output有什么区别

## Angular 2中@Input和@Output的区别与使用

typescript
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  dataFromParent = 'Hello from parent!';
}

typescript
// 子组件
import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    
{{ childData }}
  `
})
export class ChildComponent {
  @Input() parentData: string;
  get childData(): string {
    return `Child says: ${this.parentData}`;
  }
}

typescript
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    Send Event
  `
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter();
  sendEvent(): void {
    this.customEvent.emit();
  }
}

typescript
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  handleEvent(): void {
    console.log('Event received in parent component!');
  }
}