Angular 4 + primeng: передача содержимого HTML из компонента в другой

Я хочу добавить некоторые серверные функции разбивки на страницы в базу данных (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>

Мой вопрос заключается в следующем: как мне сообщить моему pagin-компоненту, чтобы p-datatable обрабатывала содержимое, отправленное в теги компонента?

После ответа ниже:

Нашел эту статью, чтобы решить проблему с праймингом: github.com/primefaces/primeng/issues/1215.


angular datatable primeng primeng-datatable angular2-ngcontent
person Callehabana    schedule 31.07.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

вы можете использовать в 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 по своему усмотрению.

person Rakesh    schedule 31.07.2017
comment
Полностью забыл эту важную особенность Angular... спасибо. Однако жизненный цикл не позволяет таблице восстановить p-столбцы. Нашел эту статью (набрав ng-content + primeng), чтобы решить проблему: github.com/primefaces /primeng/issues/1215. Работает отлично! - person Callehabana; 31.07.2017