1

我正在使用PrimeNG12.0.1 及其表在我的Angular应用程序中显示数据。

我有单独@Component的包含<p-table>在 html 模板中。里面<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>
4

1 回答 1

1

我已用于ngTemplateOutlet此目的。不过，它需要一些额外的修改，因为 AngularNo 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>
于 2021-11-26T09:37:02.390 回答