Angular 4 + primeng : 将 HTML 内容从一个组件传递到另一个组件

Question

我想在多个地方向 primeng 数据表 (p-datatable) 添加一些服务器端分页功能，所以我声明了一个新组件 "pagin-datatable.component" 具有我需要的功能和行为。

所以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>

我希望我的 p 列仍然在我的 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>

我的问题如下：如何告诉我的分页组件让 p-datatable 处理发送到组件标签中的内容？

After the answer below:

找到这篇文章来修复 primeng 问题：github。com/primefaces/primeng/issues/1215。

Answer 1

你可以像这样在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-datatable 中扭曲您的列。

Angular 4 + primeng : 将 HTML 内容从一个组件传递到另一个组件

Angular 4 + primeng : pass HTML content from a component to another

datatable

primeng

angular2-ngcontent

angular

primeng-datatable