angular - 如何从通用事件的子组件在父组件上执行方法

Question

我想要做的事情的要点是创建一个通用子组件，该组件将某种类型的操作列表作为参数。这些操作将作为按钮在子组件上动态生成，并发出一个事件，该事件将被父组件捕获并在那里调用适当的方法。

我试图避免只传递绑定(bind)到父级的函数，因为它感觉不对。

理想情况下， parent 会传递如下数据:

[{ name: 'Edit', method: 'onEdit' }, { name: 'Delete', method: 'onDelete' }]

子组件有一个像这样的发射器:

@Output() actionEvent: EventEmitter<MyGreatEvent> = new EventEmitter();

并生成如下按钮:

<button mat-menu-item *ngFor="let action of actions" (click)="actionEvent.emit({method: action.method, item: row})">
    {{action.name}}
</button>

其中 row 是 mat-table 行中的数据。

然后通过事件绑定(bind)在父级中捕获它，例如:

handleEvent(event: MyGreatEvent): void {
    // ???
    // profit
}

我尝试了一些方法，但总是忘记词法上的 this，最后我又回到了 vanilla JS 来尝试解决问题。基本上我能找到的关于发射器的所有内容都描述了事件发射器和方法之间的一对一关系。试图获得通用但仍然是 typescript-y。我觉得我错过了什么。非常感谢任何帮助!

编辑:我created a Stackblitz希望能够说明我的问题。

Answer 1

克服这个问题的一种方法是在父组件中命名函数并传递如下值。 最好不要将父组件实例作为@Input

直接传递给子组件，这总是好的

onEdit(item) {
  // edit item
}

onDelete(item) {
  // delete item
}

handleEvent({method, data }: MyGreatEvent): void {
  if (this[method] && typeof this[method] === 'function') {
    this[method](data);
  }
}