如何在Angular组件间传递ngx-datatable分组表头模板

Ah, I get it—you're trying to pass a custom group header template from your status.component to your wrapped table.component (which uses ngx-datatable), and <ng-content> isn't working as expected. That makes sense because structural templates like ngx-datatable-group-header-template need explicit context binding to the parent ngx-datatable instance, not just basic content projection. Let's walk through two reliable solutions:

Option 1: Pass Template via @Input() Property #

This is the most straightforward approach—you'll explicitly pass the template reference as an input to your Table component.

Step 1: Update table.component.ts #

Add an @Input() to accept the template, then use ngTemplateOutlet to render it with the correct context from ngx-datatable:

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

@Component({
  selector: 'app-table',
  template: `
    <ngx-datatable 
      [groupRowsBy]="groupRowsBy"
      <!-- Add your other datatable config here -->
    >
      <!-- Render the passed group header template if provided -->
      <ngx-datatable-group-header *ngIf="groupHeaderTemplate">
        <ng-template 
          ngx-datatable-group-header-template
          let-group="group" 
          let-expanded="expanded"
          [ngTemplateOutlet]="groupHeaderTemplate"
          [ngTemplateOutletContext]="{ group: group, expanded: expanded }"
        >
        </ng-template>
      </ngx-datatable-group-header>

      <!-- Your other datatable columns/settings go here -->
    </ngx-datatable>
  `
})
export class TableComponent {
  @Input() groupRowsBy: string;
  @Input() groupHeaderTemplate: TemplateRef<any>; // Accept the template as input
}

Step 2: Use the Template in status.component.html #

Define your template with a reference variable, then pass it to the Table component:

<app-table 
  [groupRowsBy]="'yourGroupKey'" <!-- Replace with your actual group key -->
  [groupHeaderTemplate]="statusGroupHeader"
>
</app-table>

<!-- Your custom group header template -->
<ng-template #statusGroupHeader let-group="group" let-expanded="expanded">
  <span>
    <button (click)="showStatus(group)">{{group.key}}</button>
  </span>
</ng-template>

Option 2: Capture Template via @ContentChild #

If you prefer using content projection, you can use @ContentChild to grab the projected template from the parent component.

Step 1: Update table.component.ts #

Use @ContentChild to detect the template marked with a specific reference variable:

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

@Component({
  selector: 'app-table',
  template: `
    <ngx-datatable 
      [groupRowsBy]="groupRowsBy"
      <!-- Add your other datatable config here -->
    >
      <ngx-datatable-group-header *ngIf="groupHeaderTemplate">
        <ng-template 
          ngx-datatable-group-header-template
          let-group="group" 
          let-expanded="expanded"
          [ngTemplateOutlet]="groupHeaderTemplate"
          [ngTemplateOutletContext]="{ group: group, expanded: expanded }"
        >
        </ng-template>
      </ngx-datatable-group-header>

      <!-- Your other datatable columns/settings go here -->
    </ngx-datatable>
  `
})
export class TableComponent {
  @Input() groupRowsBy: string;
  @ContentChild('groupHeader') groupHeaderTemplate: TemplateRef<any>; // Capture the projected template
}

Step 2: Project the Template in status.component.html #

Project your template inside the Table component tag, marking it with the reference variable #groupHeader:

<app-table [groupRowsBy]="'yourGroupKey'">
  <!-- Project the template directly inside the app-table tag -->
  <ng-template #groupHeader let-group="group" let-expanded="expanded">
    <span>
      <button (click)="showStatus(group)">{{group.key}}</button>
    </span>
  </ng-template>
</app-table>

Why <ng-content> Didn't Work #

When you tried projecting the entire <ngx-datatable-group-header> with <ng-content>, the template's context was tied to your status.component instead of the ngx-datatable instance inside table.component. The ngx-datatable-group-header-template needs to be directly associated with the parent datatable to access its group and expanded context variables—hence why explicit template passing with @Input() or @ContentChild is necessary.

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