将动态函数从父组件传递给子组件Angular

// 父组件
@Component({
  selector: 'app-parent',
  template: `
    <app-child [callback]="parentFunction"></app-child>
  `
})
export class ParentComponent {
  parentFunction() {
    console.log('This is a function from the parent component.');
  }
}

// 子组件
@Component({
  selector: 'app-child',
  template: `
    <button (click)="callback()">Click me</button>
  `
})
export class ChildComponent {
  @Input() callback: () => void;
}

// 子组件
@Component({
  selector: 'app-child',
  template: `
    <button (click)="emitEvent()">Click me</button>
  `
})
export class ChildComponent {
  @Output() eventEmitter: EventEmitter<void> = new EventEmitter<void>();

  emitEvent() {
    this.eventEmitter.emit();
  }
}

// 父组件
@Component({
  selector: 'app-parent',
  template: `
    <app-child (eventEmitter)="parentFunction()"></app-child>
  `
})
export class ParentComponent {
  parentFunction() {
    console.log('This is a function called in the parent component.');
  }
}