@ViewChild返回undefined

Question

出于某种原因,我的Angular 5 App中的@ViewChild不起作用.我在我的组件中定义了这样的:

案例detail.component.html:

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

我@ViewChild在我的控制器(构造函数之上)实现了这样:

案例detail.component.ts

@ViewChild('innerTabContent') tabContentElement: ElementRef;

我想在组件中访问它: case-detail.component.ts

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

我已经实现了AfterViewInit界面.正确调用ngAfterViewInit().但是,this.tabContentElement总是如此undefined.

任何帮助是极大的赞赏 :)

Answer 1

ViewChild() 适用于您描述的场景的最新plunker Angular版本.

这个plunker的演示:https://plnkr.co/edit/KzWnkE5Hvp7NUow6YAxy

零件 :

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

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

• 在AfterViewInit时你的元素可能根本就不存在(例如,如果有一个*ngIf.)(根据你的评论似乎是这种情况)

在后一种情况下,您可以使用包装器元素,并ViewChildren在添加新的子元素时发出一些事件 - 有关文档的更多信息,请访问:https://angular.io/api/core/ViewChildren

请注意,div根据这个问题,本机可能存在一些问题: @ViewChildren没有使用动态添加的DOM元素进行更新,但这可以通过使用包装div的新组件来解决.

编辑

或者您也可以使用超时等待呈现组件.我必须说我觉得这个解决方案"很脏",但很高兴它适合你:)

Answer 2

但是,即使您访问了子组件AfterViewInit,有时@ViewChild仍然会返回null.问题可能是由*ngIf其他指令引起的.

解决方案是使用@ViewChildren代替@ViewChild和订阅changes组件就绪时执行的订阅.

例如,如果在父组件中,则要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
    });
  }
}

Answer 3

有时，这个问题的不同答案是，当您访问子组件时，子组件仍然没有呈现。对我来说，这是由于 *ngIf 导致子组件仍然不存在。举个例子，

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

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

Answer 4

为了让它在我的情况下始终如一地工作，我替换了所有出现的

*ngIf="check"

和

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

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