如何将函数作为数据传递给angular中的另一个模块组件？

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-source',
  template: `
    <h1>Source Component</h1>
    <button (click)="myFunction()">Invoke Function</button>
  `
})
export class SourceComponent {
  @Input() myFunction: () => void;
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-target',
  template: `
    <h1>Target Component</h1>
    <button (click)="invokeFunction()">Invoke Function</button>
  `
})
export class TargetComponent {
  @Input() myFunction: () => void;

  invokeFunction() {
    if (this.myFunction) {
      this.myFunction();
    }
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-source [myFunction]="myFunction"></app-source>
    <app-target [myFunction]="myFunction"></app-target>
  `
})
export class ParentComponent {
  myFunction() {
    console.log('Function invoked!');
  }
}