Question

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

我试图避免仅传递与父系绑定的功能，因为感觉不正确。

理想情况下，父母会像这样传递数据：

[{ 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行的数据。

然后通过事件绑定将其捕获到父对象中，例如：

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

我尝试了几种方法，但始终无法理解词汇表，最后我还是回到了香草JS来尝试解决问题。基本上，我可以找到的有关发射器的所有内容都描述了事件发射器与方法之间的一对一关系。试图获得通用但仍然是打字稿的。我觉得我想念什么。任何帮助将不胜感激！

编辑：我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);
  }
}

如何通过通用事件从子级对父级组件执行方法

1 个答案: