angular - @ViewChild 返回未定义

Question

出于某种原因，我的 Angular 5 应用程序中的 @ViewChild 无法正常工作。我在我的组件中这样定义它:

case-detail.component.html:

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

我在我的 Controller 中(在构造函数之上)实现了 @ViewChild，如下所示:

case-detail.component.ts

@ViewChild('innerTabContent') tabContentElement: ElementRef;

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

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

我已经实现了AfterViewInit 接口(interface)。 ngAfterViewInit() 被正确调用。但是，this.tabContentElement 始终是 undefined。

非常感谢任何帮助:)

Answer 1

ViewChild()在您描述的场景下，在最新的 plunker Angular 版本上运行良好。

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

编辑:这是上述 Plunker 的替代 StackBlitz: https://stackblitz.com/edit/angular-ivy-pzaglm

组件:

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

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

• 您的元素可能在 AfterViewInit 时根本不存在(例如，如果有 *ngIf 。(根据您的评论似乎是这种情况)

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

请注意，原生 div 可能存在一些问题根据这个问题:@ViewChildren does not get updated with dynamically added DOM elements ，但这可以通过使用包装您的 div 的新组件来解决，例如。

编辑

或者你也可以使用超时来等待组件被渲染。我必须说我发现这个解决方案“很脏”，但很高兴它对你有用:)