如何用ngTemplateOutlet实现支持自定义模板的PrimeNG可复用表格

1. 改造可复用表格组件（ReusableTableComponent） #

在组件类中添加@ContentChild装饰器，捕获外部传入的自定义body模板，同时保留原有输入参数：

import { Component, Input, ContentChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-reusable-table',
  templateUrl: './reusable-table.component.html',
  styleUrls: ['./reusable-table.component.css']
})
export class ReusableTableComponent {
  @Input() data: any[] = [];
  @Input() cols: any[] = [];
  // 捕获外部传入的自定义body模板，约定引用标识为tableBody
  @ContentChild('tableBody') customBodyTemplate?: TemplateRef<any>;
}

2. 修改可复用组件模板逻辑 #

在表格模板中通过条件判断，优先使用外部传入的自定义模板，否则渲染默认body内容：

<p-table [value]="data" [columns]="cols">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">{{ col.header }}</th>
    </tr>
  </ng-template>

  <!-- 自定义模板渲染逻辑 -->
  <ng-template *ngIf="customBodyTemplate; else defaultBody" 
               pTemplate="body" 
               let-rowData 
               let-columns="columns">
    <ng-container [ngTemplateOutlet]="customBodyTemplate" 
                  [ngTemplateOutletContext]="{ rowData: rowData, columns: columns }">
    </ng-container>
  </ng-template>

  <!-- 默认body模板实现 -->
  <ng-template #defaultBody pTemplate="body" let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-table>

3. CustomUsers组件传入自定义模板 #

在使用可复用表格时，通过#tableBody标识传入定制化的body模板，比如给用户名称添加超链接：

<app-reusable-table [data]="users" [cols]="cols">
  <ng-template #tableBody let-rowData let-columns="columns">
    <tr>
      <td *ngFor="let col of columns">
        <ng-container *ngIf="col.field === 'name'">
          <a [routerLink]="['/users', rowData.id]">{{ rowData[col.field] }}</a>
        </ng-container>
        <ng-container *ngIf="col.field !== 'name'">
          {{ rowData[col.field] }}
        </ng-container>
      </td>
    </tr>
  </ng-template>
</app-reusable-table>

4. Users组件保持原有用法（无影响） #

原Users组件无需修改，直接使用可复用表格即可自动加载默认body模板：

<app-reusable-table [data]="users" [cols]="cols"></app-reusable-table>

内容的提问来源于stack exchange，提问作者Chandru