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

可以通过输入属性和输出属性来实现。

输入属性（@Input）：通过输入属性将父组件的函数传递给子组件。在子组件的定义中，使用@Input()装饰器来声明输入属性。以下是一个示例：

// 父组件
@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;
}

在上述示例中，通过将parentFunction作为输入属性callback传递给子组件app-child，在子组件的模板中，通过(click)事件触发该函数。

输出属性（@Output）：通过输出属性将子组件中的事件传递给父组件。在子组件的定义中，使用@Output()装饰器来声明输出属性，并使用EventEmitter来发出事件。以下是一个示例：

// 子组件
@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.');
  }
}

在上述示例中，通过使用EventEmitter来定义输出属性eventEmitter，当子组件的按钮被点击时，调用emitEvent方法触发事件。在父组件中，通过(eventEmitter)监听子组件发出的事件，并调用parentFunction方法。

通过以上的输入属性和输出属性的方式，可以将动态函数从父组件传递给子组件，实现更加灵活和交互性的组件通信。