He visto varias publicaciones y documentación relacionadas, pero parece que todavía no puedo obtener el comportamiento esperado de @ViewChild.

En última instancia, estoy tratando de establecer la posición de desplazamiento de un div. Este elemento no es un componente, sino un div normal en mi HTML.

Para lograr esto, estoy tratando de usar @ViewChild para obtener el elemento DOM que necesito y establecer su valor de desplazamiento. (Por otro lado, si conoce una mejor manera de lograr esto sin @ViewChild (o jQuery), ¡las respuestas serán muy apreciadas!)

Por el momento, @ViewChild solo devuelve indefinido. Pasando por algunas comprobaciones ficticias: - Estoy accediendo a mi elemento en AfterViewInit - No tengo otras directivas como * ngIf o * ngFor en este elemento.

Aquí está el 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);
    }
}

Y la plantilla:

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

Mi salida es simple: mi elemento: indefinido.

Como puede ver, actualmente estoy tratando de acceder al elemento por ID, pero también he intentado el nombre de la clase. ¿Alguien podría proporcionar más detalles sobre lo que espera la consulta del selector ViewChild?

También he visto ejemplos en los que se usa un hash '#' como el identificador de selector que usa @ViewChild, pero esto me causa un error de análisis de plantilla con # gallery-container.

No puedo pensar en nada más que pueda estar mal aquí. Toda ayuda es apreciada, gracias!

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