Я просмотрел несколько связанных постов и документации, но все еще не могу получить ожидаемое поведение от @ViewChild.

В конечном итоге я пытаюсь установить положение прокрутки div. Этот элемент не является компонентом, но обычный div в моем HTML.

Для этого я пытаюсь использовать @ViewChild, чтобы получить нужный мне DOM-элемент и установить его значение прокрутки. (Кроме того, если вы знаете лучший способ сделать это без @ViewChild (или jQuery), ответы будут очень благодарны!)

На данный момент @ViewChild возвращает только неопределенное. Проходя некоторые фиктивные проверки: - Я обращаюсь к своему элементу в AfterViewInit - У меня нет других директив, таких как * ngIf или * ngFor для этого элемента.

Вот контроллер:

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>

Мой вывод прост: мой элемент: не определено.

Как видите, в настоящее время я пытаюсь получить доступ к элементу по идентификатору, но также пробовал имя класса. Может ли кто-нибудь предоставить более подробную информацию о том, что ожидает запрос селектора ViewChild?

Я также видел примеры, где хэш '#' используется в качестве идентификатора селектора, который использует @ViewChild, - но это вызывает ошибку синтаксического анализа шаблона с # gallery-container.

Я не могу думать ни о чем другом, что могло бы быть здесь неправильно. Вся помощь приветствуется, спасибо!

Полный код доступен здесь:https://github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-page