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为p-dataTable，您会看到scrollable仅加载到DOM。

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" >

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

预期行为

使用说明书轻微复制问题

1 个答案: