Angular 2 @ViewChild возвращает неопределенное значение
Я просмотрел несколько связанных постов и документации, но все еще не могу получить ожидаемое поведение от @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