首页 文章

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

提问于
浏览 次
2

我在查询父组件中的子组件的指令时面临问题 . 表组件使用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

angular angular2-directives

1 回答

  • 0

    如果查看 p-dataTable 组件的模板，如果 p-dataTable 是 scrollable ，您将看到 pScrollableView 仅加载到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" >
    回复于

相关问题