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

Posted 2023-02-22

【中文标题】无法使用 ViewChild 查询子组件指令/组件表单父

【英文标题】：Not able to query Child Components Directive/Component form Parent using ViewChild

【发布时间】：2018-06-09 01:24:07

【问题描述】：

我在查询父组件中子组件的指令时遇到问题 表格组件使用 scrollableView 指令。我的报告摘要组件中使用了表格组件。 在reportSummary 组件中，我试图使用@ViewChild 查找scrollbaleView 指令的实例。 我能够使用@ViewChild(DataTable) table 找到表格组件：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

【问题讨论】：

我检查了你的 stackblitz，但我没有看到 ScrollableView 在模板中的使用位置。你能告诉我吗？我对Primeng不熟悉，所以可能错过了。

【参考方案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" >

【讨论】：

感谢您的快速响应。你的权利我错过了一个可滚动的例子，即使是可滚动的，它也无法获取可滚动的视图。更新了可滚动的示例。

你怎么知道应该有ScrollableView组件。不显示滚动条。您以前在其他代码示例中见过吗？ [pScrollableView] 是组件的选择器，但它没有显示在您的 stackblitz 示例中。

@zgue，感谢您的快速响应，在更新的示例中，滚动条在我的示例中可见。是的 [pscrollableView] 将被添加。

你能检查一下你的 stackblitz 例子吗，我看不到滚动条。

primeng css 未加载，实际上在 angular-cli.json 样式对象中添加应该这样做。但在 stackblitz 中它不起作用。由于 css 不可用，它没有直观地显示滚动条，但添加了可滚动视图，您可以观察到检查元素