1

我想在多个位置向primeng数据表(p-datatable)添加一些服务器端分页函数,所以我声明了一个新组件“pagin-datatable.component “我需要的功能和行为。Angular 4 + primeng:将HTML内容从一个组件传递到另一个

所以pagin-datatable.component.html(模板)随附:

<p-dataTable [value]="value" 
    resizableColumns="true" 
    scrollable="true" 
    scrollWidth="100%" 
    [(rows)]="this.gridOptions.rows" 
    [paginator]="true" 
    [lazy]="true" 
    [totalRecords]="nbTotal" 
    (onFilter)="filtrage($event)" 
    (onPage)="pagination($event)" 
    (onSort)="tri($event)" 
    [rowsPerPageOptions]="rowsPerPageOptions" > 
    /* There should be the p-columns */ 
</p-dataTable> 

我希望我对列仍然在我的main.component.html声明如下:

<pagin-datatable [value]="partenaires" (pagin)="refresh($event)" [rowsPerPageOptions]="[5,10,20,40]"> 
     <p-column sortable="true" [filter]="true" field="aField"  header="A HEADER"></p-column> 
     /* And so it goes for every other p-columns */ 
</pagin-datatable> 

我的问题如下:如何告诉我的pagin组件让p-datatable将发送到组件标签的内容对待?

下面的答案后:

发现这篇文章来解决问题primeng:github.com/primefaces/primeng/issues/1215。

回答

2

您可以在pagin-datatable.component.html使用这样

<p-dataTable [value]="value" 
    resizableColumns="true" 
    scrollable="true" 
    scrollWidth="100%" 
    [(rows)]="this.gridOptions.rows" 
    [paginator]="true" 
    [lazy]="true" 
    [totalRecords]="nbTotal" 
    (onFilter)="filtrage($event)" 
    (onPage)="pagination($event)" 
    (onSort)="tri($event)" 
    [rowsPerPageOptions]="rowsPerPageOptions" > 
    /* There should be the p-columns */ 
    <ng-content></ng-content> 
</p-dataTable> 

,并在您main.component.html您可以在pagin-数据表弯曲你的专栏,只要你想。

+1

完全忘了Angular的这个主要功能...谢谢。但是生命周期会阻止表中的p列被恢复。找到这篇文章(通过键入ng-content + primeng)来解决这个问题:https://github.com/primefaces/primeng/issues/1215。完美的作品! – Callehabana

相关问题