Question

我想在一个方法中处理组件的所有点击。我怎么能这样做？

我有一个代表单个表行的组件，其模板看起来像

<td style="text-align: right;">{{item.id}}</td>
<td style="text-align: right;">{{item.name}}</td>
<td style="text-align: right;">{{item.amount}}</td>

我想抓住任何地方可能发生的所有点击（任何td）。我怎么能这样做？

父模板

<table>
  <tbody>
    <ng-template ngFor let-item [ngForOf]="itemsCollection">
      <app-tr [item]="item" style="display: table-row"></app-tr>
    </ng-template>
  </tbody>
</table>

我可以将(click)="someParentMethod($event)"添加到父模板，但我想通过子组件处理该事件。

Answer 1

将此代码添加到app-tr组件类

@HostListener('click', ['$event'])
myClickHandler(event) {...}

Answer 2

您还添加了儿童组件的点击事件，并通过EventEmiiter

将事件从孩子发送到父母

例如

子组件

@Output onClick: EventEmiiter<any> = new EventEmiiter();

onclicking(){
this.onClick.emit('pass here you want');
}

如何处理angular4中组件的所有点击？

2 个答案: