如何创建Primeng Table自定义可复用空提示组件？解决colspan失效问题

使用PrimeNG Table时，直接在pTemplate="emptymessage"的ng-template里写<tr><td colspan="x">...</td></tr>能正常显示居中的空提示，但封装成独立组件后，colspan属性失效，文本无法居中。

代码复现 #

正常工作的代码 #

<ng-template pTemplate="emptymessage">
  <tr>
    <td colspan="12" class="empty-message">
      <div class="empty-message-container">No Data</div>
    </td>
  </tr>
</ng-template>

封装后的组件代码 #

HTML

<tr>
  <td [attr.colspan]="colspan" class="empty-message">
    <div class="empty-message-container">No Data</div>
  </td>
</tr>

TS

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'app-table-empty-message',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

CSS

.empty-message {
  padding: 20px;
}

.empty-message-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

调用方式 #

<ng-template pTemplate="emptymessage">         
  <app-table-empty-message [colspan]="11"></app-table-empty-message>
</ng-template>

Angular组件默认会在DOM中生成自定义标签（这里是<app-table-empty-message>），导致最终DOM结构变成：

<ng-template pTemplate="emptymessage">
  <app-table-empty-message>
    <tr>
      <td colspan="11">...</td>
    </tr>
  </app-table-empty-message>
</ng-template>

PrimeNG Table的空提示模板要求直接是<tr>元素作为<tbody>的子节点，额外的自定义标签会破坏表格的DOM结构，导致浏览器无法正确识别colspan属性，自然无法实现跨列居中效果。

将组件改为属性型组件，让<tr>直接作为组件的宿主元素，避免生成额外的DOM层级：

修改后的组件代码 #

TS

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

@Component({
 selector: 'tr[appTableEmptyMessage]', // 改为属性选择器，绑定到tr元素
 standalone: true,
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;

 // 将colspan绑定到宿主tr的属性
 @HostBinding('attr.colspan') get colSpanAttribute() {
   return this.colspan;
 }
}

HTML（去掉外层tr，因为宿主已经是tr）

<td class="empty-message">
  <div class="empty-message-container">No Data</div>
</td>

修改后的调用方式 #

<ng-template pTemplate="emptymessage">         
  <tr appTableEmptyMessage [colspan]="11"></tr>
</ng-template>

这样修改后，DOM结构中不会有额外的自定义标签，<tr>直接作为<tbody>的子元素，colspan属性能正常生效，文本也会正确居中。

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