Angular 角度获取对ng模板内子组件的引用

我已经创建了一个包装器组件，用于初始化数据表，以便能够在一个组件中处理所有数据表逻辑。该组件支持传递一个模板，然后用于可扩展行。在模板中，可以传递一个自定义模板，该模板可以包含另一个组件

数据表包装组件

@Component({
  selector: 'dt-wrapper',
  template: `
    <h1>Data Table Wrapper</h1>

    <p-dataTable [value]="data" [expandableRows]="expandableRows">
        <p-column *ngIf="expandableRows" expander="true" [style]="{'width':'35px'}"></p-column>
        <p-column *ngFor="let col of columns" [field]="col.field" [header]="col.header"></p-column>
        <ng-template let-rowData pTemplate="rowexpansion">
          <ng-container *ngTemplateOutlet="rowTemplate; context: {$implicit: rowData}"></ng-container>
      </ng-template>
    </p-dataTable>
  `
})

export class DataTableWrapperComponent {
  @Input() data: any;
  @Input() columns: any;
  @Input() expandableRows: boolean = false;

  // PrimeNG Data Table so that parent component can dynamically set other properties of the data table
  @ViewChild(DataTable) dataTable: DataTable;

  @ContentChild(TemplateRef) rowTemplate: TemplateRef<ElementRef>;
}

<dt-wrapper #myDataTable [data]="data" [columns]="columns" [expandableRows]="true">
    <ng-template let-rowData>
        <dt-wrapper #anotherDataTable [data]="rowData.data" [columns]="otherDatatableColumns">
    </ng-template>
</dt-wrapper>

@组件({
选择器：“dt包装器”，
模板：`
数据表包装器
`
})
导出类DataTableWrapperComponent{
@输入（）数据：任意；
@Input（）列：任意；
@Input（）expandableRows:boolean=false；
//初始化数据表，以便父组件可以动态设置数据表的其他属性
@ViewChild（DataTable）DataTable:DataTable；
@ContentChild（TemplateRef）行模板：TemplateRef；
}

用法-自定义模板

<dt-wrapper #myDataTable [data]="data" [columns]="columns" [expandableRows]="true">
    <ng-template let-rowData>
        {{ rowData | json }}
    </ng-template>
</dt-wrapper>

{{rowData | json}}

用法-传递组件

@Component({
  selector: 'dt-wrapper',
  template: `
    <h1>Data Table Wrapper</h1>

    <p-dataTable [value]="data" [expandableRows]="expandableRows">
        <p-column *ngIf="expandableRows" expander="true" [style]="{'width':'35px'}"></p-column>
        <p-column *ngFor="let col of columns" [field]="col.field" [header]="col.header"></p-column>
        <ng-template let-rowData pTemplate="rowexpansion">
          <ng-container *ngTemplateOutlet="rowTemplate; context: {$implicit: rowData}"></ng-container>
      </ng-template>
    </p-dataTable>
  `
})

export class DataTableWrapperComponent {
  @Input() data: any;
  @Input() columns: any;
  @Input() expandableRows: boolean = false;

  // PrimeNG Data Table so that parent component can dynamically set other properties of the data table
  @ViewChild(DataTable) dataTable: DataTable;

  @ContentChild(TemplateRef) rowTemplate: TemplateRef<ElementRef>;
}

<dt-wrapper #myDataTable [data]="data" [columns]="columns" [expandableRows]="true">
    <ng-template let-rowData>
        <dt-wrapper #anotherDataTable [data]="rowData.data" [columns]="otherDatatableColumns">
    </ng-template>
</dt-wrapper>

两个示例都按预期工作，在

ng template

中传递的模板将显示在展开的行中。我的问题是，在传递

ng模板中的组件的情况下，是否可以在展开行中获取子组件的引用（本例中为“anotherDatatable”）

我知道可以使用
ViewChild
获取组件的引用，但我不确定是否可以从父组件读取展开行中的组件引用。（当然，扩展行中的组件可以是任何组件，这里我只是传递另一个数据表作为示例）

我创建了这个plunker来展示我正在做的一个简单的例子。（）