如何將 ngTemplate 轉發到包裝的 PrimeNg 表

Question

對於 Angular 應用程序，我想創建一個包裝 PrimeNG 表的表組件。 對於這個表格組件，應該可以定義一個正文模板。 因此我需要以某種方式將正文模板轉發到包裝的 PrimeNG 表，但我不知道如何實現。

以下是我的表格組件的簡化版本，它包裝了 PrimeNG 表格：

import { AfterContentInit, Component, ContentChildren, Input, QueryList, TemplateRef } from '@angular/core';
import { PrimeTemplate } from "primeng/api";

@Component({
    selector: 'app-my-table',
    template: `
        <p-table
            *ngIf="bodyTemplate"
            [value]="value"
        >
            <ng-template pTemplate="caption">
                {{title}}
            </ng-template>

            <ng-template pTemplate="header">
                <tr>
                    <th *ngFor="let h of headers">{{h}}</th>
                </tr>
            </ng-template>

            <!-- here should bodyTemplate go, but how? -->
            <ng-template pTemplate="body" [ngTemplateOutlet]="bodyTemplate"></ng-template>

        </p-table>
    `
})
export class MyTableComponent implements AfterContentInit {

    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;

    @Input() title: string = '';
    @Input() headers: string[] = [];
    @Input() value: any[] = [];

    bodyTemplate: TemplateRef<any> | undefined;

    ngAfterContentInit() {
        this.templates.forEach((item) => {
            switch (item.getType()) {
                case 'body':
                    this.bodyTemplate = item.template;
                    break;
            }
        });
    }
}

下面是它應該如何使用（我使用 pTemplate 指令獲取正文模板的 TemplateRef，就像 PrimeNG 那樣）。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
      <app-my-table
          title="My table"
          [headers]="headers"
          [value]="data"
      >
          <ng-template pTemplate="body" let-item>
              <tr>
                  <td>{{item.a}}</td>
                  <td>{{item.b | uppercase }}</td>
                  <td>{{item.c | percent }}</td>
              </tr>
          </ng-template>
      </app-my-table>`,
})
export class AppComponent {

    headers = ['A', 'B', 'C'];
    data = [
        { a: 'a', b: 'b', c: 0.0},
        { a: 'a', b: 'b', c: 0.1},
        { a: 'a', b: 'b', c: 0.2},
        { a: 'a', b: 'b', c: 0.3},
        { a: 'a', b: 'b', c: 0.4},
        { a: 'a', b: 'b', c: 0.5},
    ];
}

我嘗試使用<ng-template pTemplate="body" [ngTemplateOutlet]="bodyTemplate"></ng-template>插入bodyTemplate ，但這不起作用。 這可能是缺少上下文的問題（錯誤顯示為"Cannot read properties of undefined (reading 'a')" ），但也許我只是做錯了:)。

有誰知道這是如何實現的？

Answer 1

ngTemplateOutlet與ng-container一起使用而不是ng-template

應該

<ng-container pTemplate="body" *ngTemplateOutlet="bodyTemplate; context: { $implicit: row}"></ng-container>

並將其包裝在p-table默認正文模板中

<ng-template pTemplate="body" let-row>

 <ng-template pTemplate="body" let-row> <ng-container pTemplate="body" *ngTemplateOutlet="bodyTemplate; context: { $implicit: row}"></ng-container> </ng-template>

演示在這里