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

问题描述

我查看了几个相关的帖子和​​文档，但似乎仍然无法从 @ViewChild 获得预期的行为.

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

为了实现这一点，我尝试使用@ViewChild 来获取我需要的 DOM 元素，并设置其滚动值.(顺便说一句，如果您知道没有 @ViewChild(或 jQuery)的更好方法来完成此任务，我们将不胜感激！)

目前，@ViewChild 只返回 undefined.通过一些虚拟检查:- 我正在 AfterViewInit 中访问我的元素- 我在这个元素上没有任何其他指令，如 *ngIf 或 *ngFor.

这是控制器:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';@零件({选择器:'投资组合页面'，templateUrl: './portfolio-page.component.html',styleUrls: ['./portfolio-page.component.scss']})导出类 PortfolioPageComponent 实现 AfterViewInit{@ViewChild('gallery-container') GalleryContainer: ElementRef;ngAfterViewInit(){console.log('我的元素:' + this.galleryContainer);}}

和模板:

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

我的输出很简单:我的元素:未定义.

如您所见，我目前正在尝试通过 ID 访问元素，但也尝试过类名.谁能提供有关 ViewChild 选择器查询期望的更多详细信息?

我还看到了一些示例，其中散列#"用作@ViewChild 使用的选择器标识符 -- -- 但这会导致我使用 #gallery-container 时出现模板解析错误.

我想不出这里还有什么可能出错的地方.感谢所有帮助，谢谢！

此处提供完整代码:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page

解决方案

尝试在模板中使用 ref:

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

并使用引用名称作为参数:

@ViewChild('galleryContainer') galleryContainer: ElementRef;

编辑

忘了说，任何这样声明的子视图只有在视图初始化后才可用.第一次发生这种情况是在 ngAfterViewInit(导入并实现 AfterViewInit 接口).

引用名称不能包含破折号，否则将不起作用

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

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.

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!)

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.

Here's the controller:

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);
    }
}

And the template:

<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.

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?

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!

Full code available here: https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page

解决方案

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;

EDIT

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 AfterViewInit interface).

The ref name must not contain dashes or this will not work

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