angular - 如何在子组件中触发点击事件？

Question

我想为每个点击的元素运行一个函数。这是目前的情况:

<!-- This is the parent-component -->
<template ngFor let-myData [ngForOf]="someData"> 
    <tr [item]="myData" (click)="toggleActive($event)" child-component>
</template>

子组件如下所示:

<td>{{ item.data1 }}</td>
<td>{{ item.data2 }}</td>
<td>{{ item.data3 }}</td>

每次单击 tr 时，我都希望 toggleActive 函数在我单击的子组件中触发。目前它在父组件中触发。我怎样才能按照我想要的方式进行这项工作？

Answer 1

这应该在子组件上使用模板变量并使用此变量引用它:

<template ngFor let-myData [ngForOf]="getMyData()"> 
    <tr [item]="myData" #child (click)="child.toggleActive($event)" child-component>
</template>