Angular @ViewChild返回未定义的

由于某些原因，我的Angular 5应用程序中的@ViewChild无法工作。 我在我的组件中对其进行了如下定义：

case detail.component.html:

<div class="inner-tab-content" #innerTabContent>
    <!-- // more content here -->
</div>

我想在组件中访问它： 案例详细信息.component.ts

@ViewChild('innerTabContent') tabContentElement: ElementRef;

ngAfterViewInit() {
    console.log("scroll top: " + this.tabContentElement.nativeElement);
}

我已经实现了

AfterViewInit

接口。正确调用了ngAfterViewInit（）。但是，

这个.tabContentElement

始终是

未定义的

非常感谢您的帮助：）

ViewChild（）

在最新的plunker Angular版本和您描述的场景中运行良好

在这辆车上演示：https://plnkr.co /编辑/KzWnkE5Hvp7NUow6YAxy

编辑：以下是上述Plunker的替代StackBlitz：

组成部分：

ngAfterViewInit() {
    console.log(this.testView); // correctly outputs the element in console, not undefined
}

• 检查ElementRef和ViewChild是否从“@angular/core”正确导入

• 您的元素在AfterViewInit时可能根本不存在（例如，如果存在

  *ngIf

  。（根据您的评论，情况似乎如此）

在后一种情况下，您可以使用包装器元素和

ViewChildren

，当添加新的子元素时会发出一些事件-有关文档的更多信息，请参见：

请注意，根据以下问题，本机

div

可能存在一些问题：，但这可以通过使用一个包装div的新组件来解决

编辑

---

或者您也可以使用超时等待组件渲染。我必须说，我发现此解决方案“脏”，但很高兴它对您有效：）

然而，即使您在

AfterViewInit

中访问子组件，有时

@ViewChild

仍返回

null

。问题可能由

*ngIf

或其他指令引起

解决方案是使用

@ViewChildren

而不是

@ViewChildren

，并订阅组件准备就绪时执行的

更改

订阅

例如，如果在父组件

ParentComponent

中，您希望访问子组件

MyComponent

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';
import { MyComponent } from './mycomponent.component';

export class ParentComponent implements AfterViewInit
{
  //other code emitted for clarity

  @ViewChildren(MyComponent) childrenComponent: QueryList<MyComponent>;

  public ngAfterViewInit(): void
  {
    this.childrenComponent.changes.subscribe((comps: QueryList<MyComponent>) =>
    {
      // Now you can access to the child component
    });
  }
}

从'@angular/core'导入{Component，ViewChildren，AfterViewInit，QueryList}；
从“./MyComponent.component”导入{MyComponent}；
导出类ParentComponent实现AfterViewInit
{
//为清晰起见，发出了其他代码
@ViewChildren（MyComponent）childrenComponent:QueryList；
public ngAfterViewInit（）：void
{
this.childrenComponent.changes.subscribe（（comps:QueryList）=>
{
//现在您可以访问子组件
});
}
}

对这个问题的另一种回答是，当您访问子组件时，它仍然没有呈现。对我来说，这是由于一个*ngIf，所以子组件仍然不存在。比如,

<div *ngIf="check">
   <app-child-item></app-child-item>
</div>

---

在parent.ts文件中，当check设置为false时，您尝试访问childItem。

在我的例子中，为了使这一操作保持一致，我替换了所有出现的

*ngIf="check"

与

---

否则，在我的视图首次加载时不存在的ViewChild组件可能会保持未定义状态。

您能告诉我们您是如何实现@ViewChild的吗？当然，刚刚更新了我的答案：）如果您使用的是

#innerTabContent

您将直接使用elementRef，而不是

nativeElement

console.log（this.tabContentElement）

您将获得HTMLelement@Aravind这也行不通。不幸的是，this.tabContentElement未定义。@dave0688定义#innerTabContent元素的块是否可能在某些

*ngIf

或其他在afterviewinit时未呈现的条件模板中？依赖超时是一个非常糟糕的主意。为什么*ngIf会导致元素不出现的问题AfterViewInigt？@IcedDante不确定我是否正确理解了您的实际问题，但是如果条件在

*ngIf=“condition”

中是错误的，那么实际元素将根本不存在于DOM中。所以你不能选择它。这是一个预期的行为。哦，好吧。。。是的，因为你说元素“可能…当时不在那里”，所以我认为它会因为某种原因在以后异步出现。@Orin谢谢你的通知！我创建了一个替换StackBlitz。但是，如果在到达ngAfterViewInit时this.childrenComponent仍然未定义，您该怎么办？没有什么可订阅的内容：（我认为您的代码中缺少了一些内容，因为

this.childrenComponent

是模板组件的引用。如果您将代码放在“CodeSandbox”上我可以试着帮你。不适用于Dynamicly添加的控件，如单击按钮时添加的表格行

[style.display]="check ? 'block' : 'none'"