具有特定点击功能的共享组件

Question

我创建了一个低于html的共享组件：

<ion-row class="tableContainer">
  <table class="dataTable">
    <tbody>
      <tr *ngFor="let row of data">
         <!-- Some code is omitted -->

        <td *ngFor="let b of dataButtons" ngClass="{{b.styleClass}}">
            <ion-icon title={{b.styleClass}} name={{b.value}} (click)="clickTest()"></ion-icon>
        </td>
      </tr>
    </tbody>
  </table>
</ion-row>

然后，我可以在这样的页面中使用它们：

<data-table [dataTitle]="invoicesDataTitle" [data]="invoicesData" [dataButtons]="invoicesDataButtons"></data-table>

我的问题是，当我点击按钮时，我想调用使用data-table的页面中的方法，而不是data-table组件中的方法。我怎么能这样做？

Answer 1

处理此问题的正确方法是让您的组件发出父级可以侦听的事件。

<data-table [dataTitle]="invoicesDataTitle" [data]="invoicesData" [dataButtons]="invoicesDataButtons" (dataClick)="currentPageHandler($event)"></data-table>

在data-table.component.ts

中

@Output() dataClick = new EventEmitter<SomeEventType>();

clickTest() {
    this.dataClick.emit({data: someData} as SomeEventType);
}