将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 - 希望它能够实现

解决方案：

我没有找到Covalent方式解决方案。但我设法将Teradata网格重写为自定义网格，这让我可以更好地控制它。这是Stackblitz：Demo

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如何处理模板下的模板。

另外，为了完整起见，我在covalent gitter上与OP交谈，他们说他们通过从各个共价组件重写数据表来解决它。他们分享了一个stackblitz here。