Angular 2 @ViewChild retorna indefinido

Analisei várias postagens e documentação relacionadas, mas ainda não consigo obter o comportamento esperado do @ViewChild.

Por fim, estou tentando definir a posição de rolagem de uma div. Este elemento não é um componente, mas uma div normal no meu HTML.

Para fazer isso, estou tentando usar o @ViewChild para obter o elemento DOM necessário e definir seu valor de rolagem. (Além disso, se você souber uma maneira melhor de fazer isso sem o @ViewChild (ou jQuery), as respostas serão muito bem-vindas!)

No momento, o @ViewChild retorna apenas indefinido. Passando por algumas verificações fictícias: - Estou acessando meu elemento no AfterViewInit - Não tenho outras diretivas como * ngIf ou * ngFor nesse elemento.

Aqui está o controlador:

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

E o modelo:

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

Minha saída é simples: Meu elemento: indefinido.

Como você pode ver, atualmente estou tentando acessar o elemento por ID, mas tentei o nome da classe também. Alguém poderia fornecer mais detalhes sobre o que a consulta do seletor ViewChild está esperando?

Também vi exemplos em que um hash '#' é usado como o identificador de seletor que o @ViewChild usa - - mas isso causa um erro de análise de modelo para mim com # gallery-container.

Não consigo pensar em mais nada que possa estar errado aqui. Toda a ajuda é apreciada, obrigado!

Código completo disponível aqui:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page

questionAnswers(4)

yourAnswerToTheQuestion