PrimeNG 表和可重复使用的表模板片段

Question

我正在使用PrimeNG 12.0.1 及其表在我的Angular 应用程序中显示数据。

我有单独的@Component，它在 html 模板中包含 <p-table>。在<p-table> 内部有ng-templates 用于显示表格部分，如pTemplate="colgroup"、pTemplate="header"、pTemplate="body" 等。

我想将这些部分移动到单独的文件中，以便能够在新的Component 中重复使用它们，这也将具有<p-table>。如何实现将这些元素移动到其他文件 (Component?) 并拥有工作表？

下面是一些当前的代码片段：

<p-table #table [value]="userDataSource.data$ | async" [columns]="displayedColumns" ........>

  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" [ngStyle]=".........">
    </colgroup>
  </ng-template>

  <ng-template pTemplate="header" let-columns>
    <tr>
      <ng-container *ngFor="let col of columns">
          .........
      </ng-container>
    </tr>
  </ng-template>

  <ng-template pTemplate="body" let-row let-columns="columns" let-expanded="expanded">
    <tr (click)="rowClicked(row)" class="...........">
      <ng-container *ngFor="let column of columns">
           ................
      </ng-container>
    </tr>
  </ng-template>

</p-table>

Answer 1

我为此使用了ngTemplateOutlet。不过，它需要一些额外的修补，因为 Angular 在尝试使用它而不添加作为提供者时会尖叫 No provider for Table。所以我最终做了......对于我称之为TableWrapperComponent的表格组件......需要从Primeng导入Table和TableService并将它们用作提供者：

import { Table, TableService } from 'primeng/table';

export function tableFactory(tableComponent: TableWrapperComponent) {
  return tableComponent.primengTable;
}

@Component({
  selector: 'app-table-wrapper',
  templateUrl: './table-wrapper.component.html',
  styleUrls: ['./table-wrapper.component.scss'],
  providers: [
    TableService,
    {
      provide: Table,
      useFactory: tableFactory,
      deps: [TableWrapperComponent]
    }
  ]
})

//....

一切都好，接下来是模板的 contentchildren。我这里只有header 和body，但是你可以添加你使用的所有部分:)

 @ContentChild('header') headerTemplate: TemplateRef<any>;
 @ContentChild('body') bodyTemplate: TemplateRef<any>;
 @ViewChild('primengTable', { static: true }) public primengTable: Table;

酷，现在我们已经完成了“部分”，现在在TableWrapperComponent中使用它们：

<p-table>
  <ng-template pTemplate="header">
    <tr>
      <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <ng-container *ngTemplateOutlet="bodyTemplate;context:{$implicit:item}"></ng-container>
    </tr>
  </ng-template>
</p-table>

一切都好，现在我们可以在另一个组件中使用例如 body 部分：

<app-table-wrapper>
  <ng-template let-item #body>
    <td>.....All magic....</td>
  </ng-template>
</app-table-wrapper>