共享組件

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); 
}