Javascript 将动态函数从父组件传递到子组件

我正在为angular应用程序创建一个公共表组件，以便该组件接受行、列的输入，以及一些操作按钮处理程序函数和渲染表

桌子是这样的

我 这样，就可以使用单个组件为整个应用程序呈现表

//parent-component.ts

parentFunction1(){
  //edit User
}
parentFunction2(){
  //delete User
}
parentFunction3(){
  //view user
}

我正在将来自父组件的数据作为

//inside some-parent.component.html

<common-table
    [columns]="columnConfig"
    [dataSource]="rowConfig">
</common-table>

从

表cell.component.html

我需要调用

父组件.ts

的函数。对于不同的组件，我的函数名可能会有所不同，在angular中是否有任何方法可以

           [
              {
                name: 'Edit',
                type: 'button',
                outputHandler:parentFunction1
              },
              {
                name: 'Delete',
                type: 'button',
                outputHandler:parentFunction2
              },
              {
                name: 'View',
                type: 'button',
                outputHandler:parentFunction3
              }
            ]

这样，就可以从父组件传递，并使用孙子

表cell.component.html

---

我可以使用output和eventemitter，但由于传递的函数数量和函数名称可能不同，所以不能硬记录。如何做到这一点。我搜索了很多，但没有找到解决方案，请提供帮助。

这就是您的根组件的外观

export class AppComponent {
  title = "CodeSandbox";

  myConfig: ConfigModel[] = [
    {
      name: "Edit",
      type: "button",
      outputHandler: this.parentFunction1
    },
    {
      name: "Delete",
      type: "button",
      outputHandler: this.parentFunction2
    },
    {
      name: "View",
      type: "button",
      outputHandler: this.parentFunction3
    }
  ];

  parentFunction1() {
    console.log("parent func 1");
  }

  parentFunction2() {
    console.log("parent func 2");
  }

  parentFunction3() {
    console.log("parent func 3");
  }
}

当您将此配置传递给您的孙子组件时。您可以直接从配置对象调用函数

<div *ngFor="let item of config">
  <button (click)="action(item)">{{item.name}}</button>
</div>


export class ActionComponent {
  @Input() config: ConfigModel[];

  action(item: ConfigModel) {
    console.log(item);
    item.outputHandler();
  }
}

{{item.name}
导出类ActionComponent{
@Input（）配置：ConfigModel[]；
操作（项目：ConfigModel）{
控制台日志（项目）；
item.outputhHandler（）；
}
}

---

您是否计划在组件配置中将函数名作为字符串传递？@VimalPatel否我不想将函数名作为字符串传递，我想传递整个函数，即作为函数引用传递。正确吗？是的，我还希望如果我从grand component调用该函数，它可以访问父组件的属性，就像事件发射器访问父组件的属性一样。为什么要从子组件访问父组件属性？我想你需要先检查一下你的组件设计。您偏离了基本组件交互。

<div *ngFor="let item of config">
  <button (click)="action(item)">{{item.name}}</button>
</div>


export class ActionComponent {
  @Input() config: ConfigModel[];

  action(item: ConfigModel) {
    console.log(item);
    item.outputHandler();
  }
}