2
ngx-datatable row-detail内の動的コンポーネント
ngx-datatableを使用して再利用可能なデータテーブルを作成しています。動的コンポーネントを行の詳細の内部にレンダリングしたいと思います。データテーブルコンポーネントは、親モジュールから引数としてコンポーネントクラスを受け取り、ComponentFactoryを使用してcreateComponentを作成します。動的コンポーネントに対してコンストラクターと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 …