Angular2 为什么使用 @Output 而不是 @Input 进行回调

# 为什么在Angular中使用 @Output 进行回调而不是 @Input

typescript
// 父组件
import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    
  `
})
export class ParentComponent {
  parentData = 'Hello from Parent';
  handleOutput(data: string) {
    console.log(`Received data from child: ${data}`);
  }
}

typescript
// 子组件
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    
{{ inputData }}
    Trigger Output
  `
})
export class ChildComponent {
  @Input() inputData: string;
  @Output() outputEvent = new EventEmitter();
  triggerOutput() {
    this.outputEvent.emit('Hello from Child');
  }
}

typescript
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-async-child',
  template: `
    Perform Async Operation
  `
})
export class AsyncChildComponent {
  @Output() asyncOperationComplete = new EventEmitter();
  performAsyncOperation() {
    // 模拟异步操作
    setTimeout(() => {
      this.asyncOperationComplete.emit('Async operation completed');
    }, 2000);
  }
}

typescript
// 子组件
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-callback-child',
  template: `
    Callback 1
    Callback 2
  `
})
export class CallbackChildComponent {
  @Output() callback1Complete = new EventEmitter();
  @Output() callback2Complete = new EventEmitter();
  callback1() {
    // 执行回调逻辑
    this.callback1Complete.emit();
  }
  callback2() {
    // 执行回调逻辑
    this.callback2Complete.emit();
  }
}