Question

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

数据表包装组件

@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>
        {{ rowData | json }}
    </ng-template>
</dt-wrapper>

用法 - 传递组件

<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-template中传递组件的情况下，是否可以在扩展行中获取子组件的引用（在本例中为'anotherDatatable'）。

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

我已经创建了这个plunker来展示我正在做的一个简单的例子。（https://plnkr.co/edit/5swUtFokLZOfHx8BhwNS?p=preview）

Angular获取对ng-template内的子组件的引用

0 个答案: