angular - 如何使用带有数据表的 ts 代码中的 @ViewChild 从父组件向 DOM 注入子视图

Question

这是创建数据表的父组件：

 import {CollectedItemsDynamic} from "../collected-items-datatable/collected-items-dynamicView";
    declare var $: any;

    @Component({
      selector: 'sa-datatable-roi',
      template: `<table class="dataTable {{tableClass}}" width="{{width}}">
            <ng-content></ng-content>
          </table>`,          
    })
    export class DatatableComponent implements OnInit {

      @ViewChild(CollectedItemsDynamic) collectedItemsDynamic: CollectedItemsDynamic;

      ngOnInit() {
        this.render()    
      }

      render() {
        let element = $(this.el.nativeElement.children[0]);
        let options = this.options

        const _dataTable = element.DataTable(options);


          element.on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = _dataTable.row( tr );
            if ( row.child.isShown() ) {
              row.child.hide();
              tr.removeClass('shown');
            }
            else {
              row.child( -----> Inject_here_the_CollectedItemsDynamic_template <----- ).show();
              tr.addClass('shown');
            }
          })
        }
    }

这是动态组件：

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;


    @Component({
        selector: 'collected-items-dynamic',
        templateUrl: `
                 <td><button (click)="test()"></button></br></br></td>               
    `,
    })

    export class CollectedItemsDynamic{

        public test() {
            console.log(test);
        }
    }

我想在使用的行之后注入 CollectedItemsDynamic 组件的 html 模板row.child( -----> Inject_here_the_CollectedItemsDynamic_template <-----).show();

这应该在所选行之后添加一个，并且按钮单击应该打印到控制台 == CollectedItemsDynamic 中的绑定应该可以工作。

有没有办法将 CollectedItemsDynamic 注入 DatatableComponent 的 DOM？