无法访问 Angular 父组件中的 @ViewChild 属性

Posted 2023-02-23

【中文标题】无法访问 Angular 父组件中的 @ViewChild 属性

【英文标题】：Cannot access @ViewChild property in angular parent component

【发布时间】：2020-06-17 23:33:24

【问题描述】：

child.component.ts

currentPage = 1;

parent.component.ts

export class ParentComponent implements OnInit, AfterViewInit 
  @ViewChild(ChildComponent, static: false) child;
  ngAfterViewInit() 
      console.log(this.child.currentPage); // throws error
  

parent.component.ts

<app-child></app-child>

我尝试设置超时，但也没有用。

ERROR TypeError: Cannot read property 'currentPage' of undefined

我做错了什么？

【问题讨论】：

添加子组件的类型：``` @ViewChild(ChildComponent, static: false) child: ChildComponent ``

这也经常发生在我身上。确保孩子不在 ngIf 内并且不在订阅后，如果它是你必须在设置后等待，否则不可用。

@shAkur，如果您的 ChildComponent 不在 Angular 中，因为您有一个 *ngIf="condition" -并且条件一开始是错误的，给您一个错误 - 您可以使用 if @987654325 来解决@，傻逼例子stackblitz.com/edit/…

父组件内部子组件的引用确实是有条件的：。我的孩子参考在 withoutResults ng 模板中:(

【参考方案1】：

试试这样：

.html

<app-child #ChildComponent></app-child>

.ts

@ViewChild("ChildComponent", static: true) child:ChildComponent;

【讨论】：

@angular-devkit/core 8.3.23 @angular-devkit/schematics 8.3.23 @angular/cdk 8.2.3 @angular/cli 8.3.23 @ngtools/webpack 8.3.23 @schematics/角度 8.3.23

如果他想操作DOM，他需要指定#ChildComponent，但是在这种情况下，他不需要这个

【参考方案2】：

指定组件名称并在子视图中键入如下

@ViewChild(HelloComponent, static: false) hello: HelloComponent;

查看示例stackblitz

【参考方案3】：

有效。

parent.component.ts

export class AppComponent implements AfterViewInit 

  @ViewChild('child', static: true)
  child: ChildComponent;

  ngAfterViewInit() 
    console.log(this.child.currentPage); // works
  

parent.component.html

<app-child #child></app-child>

child.component.ts

export class ChildComponent 
    currentPage = 1;