primeNG -table组件封装，用ng-template分离出header和body,在组件内，thead上的事件不起作用

Question

`<app-stock-table style="height: 100%;" [tableDatas]="tableDatas" [tableMsg]="tableMsg" [showPage]="showPage" [emptyMessage]="emptyMessage" [rowShowNum]="rowShowNum">

<ng-template #tableHeader>
<tr><th>.....</th></tr>
</ng-template>

<ng-template #tableBody>
<tr><td>.....</td></tr>
</ng-template>

</app-stock-table>
`

`<p-table [value]="tableDatas" [rowHover]="true" [resizableColumns]="true" [scrollable]="true" selectionMode="multiple" [metaKeySelection]="false" [paginator]="showPage" [pageLinks]="pageLinks" [rows]="rowShowNum" [lazy]="true" [totalRecords]="allDataTotal"

[sortMode]="multiple" (sortFunction)="customSort($event)" [customSort]="true" (onLazyLoad)="loadClaimsLazy($event)">

<!-- 数据为空时的提示信息 -->
<ng-template pTemplate="emptymessage">
    <eui-table-empty-message [emptyMessage]="emptyMessage"></eui-table-empty-message>
</ng-template>

<!-- 列宽大小定义 -->
<ng-template pTemplate="colgroup">
    <ng-container *ngTemplateOutlet="egoalBodyTrTdRef"></ng-container>
</ng-template>

<!-- 表头 -->
<ng-template pTemplate="header">
    <ng-container *ngTemplateOutlet="egoalBodyTrTdRef2"></ng-container>
</ng-template>

<!-- 表格内容 -->
<ng-template pTemplate="body" let-item>
    <ng-container *ngTemplateOutlet="egoalBodyTrTdRef3,context: {$implicit: item }"></ng-container>
</ng-template>

<!-- 分页器 -->
<ng-template pTemplate="paginatorleft" let-state>
    <button type="button " pButton icon="fa-refresh "></button>
</ng-template>
<ng-template pTemplate="paginatorright">
    <a class="ui-paginator-element ui-state-default ui-corner-all ui-state-disabled totalNum">
        共{{allDataTotal}}条
    </a>
</ng-template>

</p-table>`