无法使用ViewChild查询子组件指令/组件表单父级

Question

我在查询父组件中的子组件的指令时面临问题。表组件使用scrollableView指令。和表组件用于我的报告摘要组件。在reportSummary组件中我试图使用@ViewChild查找scrollbaleView指令的实例。我能够使用@ViewChild（DataTable）表找到表组件：DataTable;同样，我应该能够找到@ViewChild（ScrollableView）scrollview：ScrollableView;但它没有ViewChild文档说明这个https://angular.io/api/core/ViewChild您可以使用ViewChild来获取第一个元素或与视图DOM中的选择器匹配的指令。如果视图DOM更改并且新子项与选择器匹配，则将更新该属性。在调用ngAfterViewInit回调之前设置视图查询。

有趣的是，在ngAfterViewInit函数中找不到表引用，我可以在其他地方获取值。但是在任何时间点都找不到scrollableView。

预期的行为

scrollableView也应该被查询和可用。

用指令最小化再现问题

https://stackblitz.com/edit/child-directive-query

Answer 1

如果你看一下p-dataTable组件的模板，你会看到pScrollableView只加载到DOM，如果p-dataTable是scrollable。

datatable.ts

<ng-template [ngIf]="scrollable">

  <div class="ui-datatable-scrollable-wrapper ui-helper-clearfix">

    <div *ngIf="hasFrozenColumns()" [pScrollableView]="frozenColumns" frozen="true"
         [headerColumnGroup]="frozenHeaderColumnGroup" [footerColumnGroup]="frozenFooterColumnGroup"
         [ngStyle]="{'width':this.frozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view">
    </div>
    ...
</ng-template>

因此，您必须定义DataTable，以便它使用ScrollableView，否则它将不在DOM中。

<p-dataTable [value]="cars" [loading]="loading" [scrollable]="true" scrollHeight="100px" >