[英]Not able to query Child Components Directive/Component form Parent using ViewChild
I am facing issue with querying a directive of the child component in a parent component Table component uses scrollableView directive. 我在父组件中查询子组件的指令时遇到问题表组件使用scrollableView指令。 and table component is used in my Report summary component.
报表摘要组件中使用了表格组件。 in reportSummary component am trying to find the instance of scrollbaleView directive using @ViewChild.
在reportSummary组件中,我正在尝试使用@ViewChild查找scrollbaleView指令的实例。 I was able to find the table component using @ViewChild(DataTable) table : DataTable;
我能够使用@ViewChild(DataTable)table查找表组件:DataTable; similarly, i should be able to find @ViewChild(ScrollableView) scrollview : ScrollableView;
同样,我应该能够找到@ViewChild(ScrollableView)scrollview:ScrollableView; but it does not ViewChild documentation says this https://angular.io/api/core/ViewChild You can use ViewChild to get the first element or the directive matching the selector from the view DOM.
但ViewChild文档没有这样说明https://angular.io/api/core/ViewChild您可以使用ViewChild从视图DOM中获取与选择器匹配的第一个元素或指令。 If the view DOM changes and a new child matches the selector, the property will be updated.
如果视图DOM更改并且新的子项与选择器匹配,则该属性将被更新。 View queries are set before the ngAfterViewInit callback is called.
视图查询是在调用ngAfterViewInit回调之前设置的。
Interestingly table reference is not found in ngAfterViewInit function, i could get the value somewhere else. 有趣的是,在ngAfterViewInit函数中找不到表引用,我可以在其他地方获取该值。 But scrollableView is not found at any point in time.
但是在任何时间都找不到scrollableView。
scrollableView should also be queried and available. scrollableView也应该被查询并可用。
https://stackblitz.com/edit/child-directive-query https://stackblitz.com/edit/child-directive-query
If you look at the template of the p-dataTable
component you will see that the pScrollableView
is only loaded to the DOM if the p-dataTable
is scrollable
. 如果查看
p-dataTable
组件的模板,将会看到pScrollableView
仅在p-dataTable
scrollable
时才加载到DOM。
datatable.ts 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>
So you have to define your DataTable so that it uses the ScrollableView, otherwise it will not be in the DOM. 因此,您必须定义DataTable,使其使用ScrollableView,否则它将不在DOM中。
<p-dataTable [value]="cars" [loading]="loading" [scrollable]="true" scrollHeight="100px" >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.