将ng-template传递到组件

Question

我面临的问题是，我需要将多个ng-template传递到另一个组件作为模板，例如：

<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>

app-datatable是我的组件，我需要将这些模板作为模板传递给它。

td-data-table是Teradata共价DataTable组件。 它具有功能，可以使用ng-template模板化每列。 但是我想将ng-template通过我的组件传递到td-data-table中 -希望它能引起人们的注意

解：

我没有找到共价方式解决方案。 但是我设法将Teradata网格重写为自定义网格，这使我可以对其进行更多控制。 这是Stackblitz： 演示

Answer 1

我遇到了同样的问题，并设法通过以下方法解决了该问题：

在datatable.component.ts中：

@Component({
    selector: 'app-data-table',
    templateUrl: './data-table.component.html',
    styleUrls: ['./data-table.component.scss']
})
export class DataTableComponent implements OnChanges, AfterContentInit {
    ngAfterContentInit(): void {
        for (let template of this.templates.toArray()) {
            if (!template.tdDataTableTemplate) {
                continue
            }
            this.tdDataTable._templateMap.set(template.tdDataTableTemplate, template.templateRef)
        }
    }

    @ViewChild(TdDataTableComponent) tdDataTable;
    @ContentChildren(TdDataTableTemplateDirective) templates;
}

这模仿了TdDataTableCompponent如何在TdDataTableCompponent处理模板。

另外，为了完整起见 ，我与OP谈起了共价转运蛋白 ，他们说他们通过重写各个共价组分的数据表来解决这个问题。 他们在这里共享了一次闪电战。