共享组件

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> 

内，您的数据table.component.ts

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

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