Angular 2 @ViewChild返回未定义 [英] Angular 2 @ViewChild returns undefined

问题描述

我已经查看了几个相关的帖子和​​文档，但仍然似乎没有从@ViewChild中获得预期的行为。

I've looked at several related posts and documentation, but still can't seem to get expected behavior from @ViewChild.

最终，我正在设置一个div的滚动位置。这个元素不是一个组件，而是我的HTML中的一个普通的div。

Ultimately, I'm trying to set the scroll position of a div. This element isn't a component, but a normal div in my HTML.

要完成此操作，我试图使用@ViewChild获取我需要的DOM元素，并设置其滚动值。 （除此之外，如果你知道一个更好的方法来完成这个没有@ViewChild（或jQuery），答案将非常感谢！）

To accomplish this, I'm trying to use @ViewChild to get the DOM element I need, and set its scroll value. (As an aside, if you know a better way to accomplish this without @ViewChild (or jQuery), answers will be very much appreciated!)

此刻，@ ViewChild只返回undefined。经历一些虚拟检查：
- 我在AfterViewInit
中访问我的元素 - 我没有任何其他指令，如* ngIf或* ngFor在此元素上。

At the moment, @ViewChild only returns undefined. Going through some dummy checks: - I am accessing my element in AfterViewInit - I do not have any other directives like *ngIf or *ngFor on this element.

这是控制器：

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

@Component({
    selector: 'portfolio-page',
    templateUrl: './portfolio-page.component.html',
    styleUrls: ['./portfolio-page.component.scss']
})

export class PortfolioPageComponent implements AfterViewInit{
    @ViewChild('gallery-container') galleryContainer: ElementRef;

    ngAfterViewInit(){
        console.log('My element: ' + this.galleryContainer);
    }
}

模板：

<div id='gallery-container' class='gallery-image-container'>
    <div class='gallery-padding'></div>
    <img class='gallery-image' src='{{ coverPhotoVm }}' />
    <img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>

我的输出很简单：我的元素：未定义。

My output is simple: My element: undefined.

正如你所看到的，我目前正在尝试通过ID访问元素，但也尝试过类名。任何人都可以提供更多关于ViewChild选择器查询所期待的细节？

As you can see, I'm currently trying to access the element by ID, but have tried class name as well. Could anyone provide more detail about what the ViewChild selector query is expecting?

我也看过一些例子，其中使用哈希'＃'作为选择器识别符@ViewChild使用 - - 但这会导致我的＃gallery-container的模板解析错误。

I've also seen examples where a hash '#' is used as the selector idendifier that @ViewChild uses -- -- but this causes a template parse error for me with #gallery-container.

我不能想到任何其他可能在这里是错误的。所有的帮助是感谢，谢谢！

I can't think of anything else that could possible be wrong here. All help is appreciated, thanks!

全部代码可在这里： https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page

推荐答案

请尝试在您的模板中使用ref：

Try using a ref in your template instead:

<div id='gallery-container' #galleryContainer class='gallery-image-container'>
    <div class='gallery-padding'></div>
    <img class='gallery-image' src='{{ coverPhotoVm }}' />
    <img class='gallery-image' src='{{ imagepath }}' *ngFor='let imagepath of imagesVm' />
</div>

使用参考名称作为参数：

And use the ref name as the argument:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

编辑

忘记提到任何这样声明的视图小孩只有在视图初始化之后才可用。第一次发生在 ngAfterViewInit （导入并实现 OnAfterViewInit 接口）。

Forgot to mention that any view child thus declared is only available after the view is initialized. The first time this happens is in ngAfterViewInit (import and implement the OnAfterViewInit interface).

参考名称必须在骆驼案中，否则将无法正常工作

这篇关于Angular 2 @ViewChild返回未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！