如何将多个ng-template传入自定义组件并透传给Teradata Covalent DataTable

问题背景 #

我之前也遇到过完全一样的需求：自定义了<app-datatable>组件，需要把内部定义的多个带有tdDataTableTemplate指令的ng-template透传到底层的Teradata Covalent td-data-table组件，因为这个组件支持通过模板自定义列的渲染逻辑，但翻遍Covalent官方文档也没找到现成的透传方案。

你给出的使用示例很典型：

<app-datatable>
  <ng-template tdDataTableTemplate="description" let-value="value" let-row="row" let-column="column">
    <p matTooltip="{{ row[column ]}}">{{ row[column] }}</p>
  </ng-template>
  <ng-template tdDataTableTemplate="vendorName" let-value="value">
    <p matTooltip="{{ value }}">{{ value }}</p>
  </ng-template>
</app-datatable>

我的解决方案 #

既然官方没有提供直接的透传方式，我选择了重写Teradata的表格组件为自定义表格，这样能完全掌控模板的传递和渲染逻辑，彻底解决透传的局限性。

核心实现思路 #

• 在自定义的<app-datatable>组件中，通过ContentChildren获取所有带有TdDataTableTemplateDirective的模板实例
• 基于自己的表格结构（替代原td-data-table），遍历列配置和数据行，匹配对应的模板并传入正确的上下文（比如value、row、column）
• 这样就能让外层传入的模板直接在自定义表格中生效，完全不需要依赖原组件的透传机制

代码示例 #

自定义表格组件类

import { Component, ContentChildren, Input, QueryList } from '@angular/core';
import { TdDataTableTemplateDirective } from '@covalent/core/data-table';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent {
  @Input() columns: Array<{ name: string; label: string }> = [];
  @Input() data: any[] = [];

  // 获取所有传入的tdDataTableTemplate模板
  @ContentChildren(TdDataTableTemplateDirective) private _templates!: QueryList<TdDataTableTemplateDirective>;

  // 根据列名匹配对应的模板
  getTemplate(columnName: string) {
    return this._templates.find(tpl => tpl.name === columnName)?.templateRef || null;
  }
}

自定义表格模板

<!-- 自定义表格结构，可根据需求调整样式 -->
<table class="custom-data-table">
  <thead>
    <tr>
      <th *ngFor="let column of columns">{{ column.label }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of data">
      <td *ngFor="let column of columns">
        <!-- 使用ngTemplateOutlet渲染匹配到的模板，并传入上下文 -->
        <ng-container 
          *ngIf="getTemplate(column.name); let template"
          [ngTemplateOutlet]="template"
          [ngTemplateOutletContext]="{ 
            value: row[column.name], 
            row: row, 
            column: column 
          }"
        ></ng-container>
        <!-- 如果没有匹配到模板，默认渲染值 -->
        <span *ngIf="!getTemplate(column.name)">{{ row[column.name] }}</span>
      </td>
    </tr>
  </tbody>
</table>

这样一来，你就能像之前示例那样在<app-datatable>中传入自定义模板，自定义表格会自动匹配并渲染对应的内容，完全实现了原td-data-table的模板自定义能力，同时还能根据业务需求扩展更多功能。

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