javascript - 将 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处理引擎盖下的模板。

此外，为了完整起见，我在共价 gitter上与 OP 进行了交谈，他们说他们通过从各个共价组件重写数据表来解决它。他们在这里分享了一个堆栈闪电战。