Angular：如何将外部ng-template传递给第三方组件（如p-table）

Got it, let's solve this problem: PrimeNG's p-table relies on scanning its direct content children for ng-template elements with the pTemplate directive—using ngTemplateOutlet won't work because it doesn't add the template as a direct child of the table, so the component can't pick up the pTemplate metadata.

We can fix this without modifying p-table at all, using either a reusable directive or a simple wrapper component. Here's both approaches:

This directive takes your external template, wraps it in a new ng-template with the required pTemplate attribute, and injects it directly into the table so PrimeNG detects it natively.

Step 1: Create the Directive #

import { Directive, Input, TemplateRef, OnInit, ViewContainerRef, Inject } from '@angular/core';
import { Table } from 'primeng/table';

@Directive({
  selector: '[pTableExternalTemplate]'
})
export class TableExternalTemplateDirective implements OnInit {
  // Reference to your external template
  @Input('pTableExternalTemplate') externalTemplate!: TemplateRef<any>;
  // The pTemplate type (e.g., "header", "body", "footer")
  @Input() pTemplate!: string;
  // Optional: Pass context data to the template
  @Input() templateContext?: any;

  constructor(
    private viewContainerRef: ViewContainerRef,
    @Inject(Table) private table: Table
  ) {}

  ngOnInit(): void {
    // Create a new ng-template with the correct pTemplate attribute
    const templateEl = document.createElement('ng-template');
    templateEl.setAttribute('pTemplate', this.pTemplate);

    // Render the external template inside our new template
    const embeddedView = this.viewContainerRef.createEmbeddedView(
      this.externalTemplate,
      this.templateContext || {}
    );
    embeddedView.rootNodes.forEach(node => templateEl.appendChild(node));

    // Add the new template as a direct child of the table
    this.table.el.nativeElement.appendChild(templateEl);

    // Force the table to re-scan templates if it's already initialized
    if (this.table.initialized) {
      this.table.initTemplates();
    }
  }
}

Step 2: Register the Directive #

Add this directive to your Angular module's declarations array so it's available in your components.

Step 3: Use It in Your Template #

Define your template anywhere outside the table, then pass it via the directive:

<!-- External template (can be anywhere in your component) -->
<ng-template #customHeader pTemplate="header">
  <tr>
    <th>Custom Column 1</th>
    <th>Custom Column 2</th>
  </tr>
</ng-template>

<!-- Your p-table, no modifications needed -->
<p-table [value]="dataset">
  <!-- Inject the external header template -->
  <ng-container 
    [pTableExternalTemplate]="customHeader"
    [pTemplate]="'header'"
    [templateContext]="{ $implicit: dataset }"
  ></ng-container>

  <!-- Regular internal templates still work as usual -->
  <ng-template pTemplate="body" let-item>
    <tr>
      <td>{{ item.col1 }}</td>
      <td>{{ item.col2 }}</td>
    </tr>
  </ng-template>
</p-table>

If you prefer a component-based approach instead of a directive, use a wrapper that projects your external template into a table-compatible ng-template:

Step 1: Create the Wrapper Component #

<!-- table-template-wrapper.component.html -->
<ng-template [pTemplate]="templateType">
  <ng-container 
    [ngTemplateOutlet]="externalTemplate"
    [ngTemplateOutletContext]="templateContext"
  ></ng-container>
</ng-template>

// table-template-wrapper.component.ts
import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-table-template-wrapper',
  templateUrl: './table-template-wrapper.component.html'
})
export class TableTemplateWrapperComponent {
  @Input() externalTemplate!: TemplateRef<any>;
  @Input() templateType!: string;
  @Input() templateContext?: any;
}

Step 2: Use the Wrapper in Your Template #

<p-table [value]="dataset">
  <!-- Pass the external template via the wrapper -->
  <app-table-template-wrapper
    [externalTemplate]="customHeader"
    [templateType]="'header'"
    [templateContext]="{ $implicit: dataset }"
  ></app-table-template-wrapper>

  <!-- ... rest of your table templates ... -->
</p-table>

Both approaches work because they create a direct child ng-template with the pTemplate attribute that p-table expects. The external template's content is rendered inside this native-compatible template, so PrimeNG's internal template-scanning logic picks it up just like any regular internal template.

内容的提问来源于stack exchange，提问作者Roland Rácz