时间戳

首页 > 解决方案 > ngx-datatable row-detail 中的动态组件

angular - ngx-datatable row-detail 中的动态组件

问题描述

我正在使用 ngx-datatable 创建一个可重用的数据表，并且我希望在行详细信息中呈现动态组件。数据表组件从父模块接收组件类作为参数，我使用 ComponentFactory 来创建组件。我可以看到构造函数和 onInit 方法正在为动态组件运行，但它没有附加到 DOM。

这是 row-detail 的数据表 html 的样子：

 <!-- [Row Detail Template] -->
        <ngx-datatable-row-detail rowHeight="100" #myDetailRow (toggle)="onDetailToggle($event)">
          <ng-template let-row="row" #dynamicPlaceholder let-expanded="expanded" ngx-datatable-row-detail-template>
          </ng-template>
        </ngx-datatable-row-detail>
 <!-- [/Row Detail Template] -->

这就是我的 .ts 文件的样子：

@ViewChild('myDetailRow', {static: true, read: ViewContainerRef}) myDetailRow: ViewContainerRef;
@ViewChild('dynamicPlaceholder', {static: true, read: ViewContainerRef}) dynamicPlaceholder: ViewContainerRef;

renderDynamicComponent(component) {
        var componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        var hostViewConRef1 = this.myDetailRow;
        var hostViewConRef2 = this.dynamicPlaceholder;
        hostViewConRef1.createComponent(componentFactory);
        hostViewConRef2.createComponent(componentFactory);
}

另一点是，如果我的#dynamicPlaceholderng-template 放在 ngx-datatable 之外，它可以工作并且动态模块被渲染和显示。

标签： angularngx-datatable

解决方案

我们不能<ng-template>在运行时将组件渲染到模板（）中，createComponent
因为 afaik 模板在编译时由 Angular 处理。所以我们需要一个在编译时工作的解决方案。

有缺点的解决方案

ng-content可以在这里帮助我们：

<!-- [Row Detail Template] -->
<ngx-datatable-row-detail rowHeight="100" (toggle)="onDetailToggle($event)">
   <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
      <ng-content></ng-content>
   </ng-template>
</ngx-datatable-row-detail>
<!-- [/Row Detail Template] -->

然后我们可以将任何我们想要的东西传递给细节视图：

<my-table>From the ouside but I cant access the current row :(</my-table>

但是有一个问题：ng-content当我们想访问传递的模板中的当前行时，我们不能使用。

解决方案

但ngx-datatable让我们得到了保障。我们可以将模板传递给ngx-datatable-row-detail指令：

<ngx-datatable-row-detail [template]="myDetailTemplate "rowHeight="100" (toggle)="onDetailToggle($event)">
</ngx-datatable-row-detail>

然后可以通过@Input变量从外部的任何组件传入模板：

<ng-template #myDetailTemplate let-row="row">
  From the outside with access to the current row: {{row.name}}
</ng-template>

看一下stackblitz，我在其中编写了一个my-tablepoc 组件。

推荐阅读