Angular 2 @ViewChild gibt undefined @ zurü
Ich habe mir mehrere verwandte Posts und Dokumentationen angesehen, kann aber immer noch nicht das erwartete Verhalten von @ ViewChild erhalten.
Letztendlich versuche ich, die Bildlaufposition eines div festzulegen. Dieses Element ist keine Komponente, sondern ein normales div in meinem HTML.
Um dies zu erreichen, versuche ich, mit @ViewChild das benötigte DOM-Element abzurufen und dessen Bildlaufwert festzulegen. (Nebenbei bemerkt, wenn Sie einen besseren Weg kennen, dies ohne @ViewChild (oder jQuery) zu erreichen, werden Antworten sehr geschätzt!)
Im Moment gibt @ViewChild nur undefined zurück. Gehen Sie einige Dummy-Prüfungen durch: - Ich greife auf mein Element in AfterViewInit zu. - Ich habe keine anderen Anweisungen wie * ngIf oder * ngFor für dieses Element.
Hier ist der 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);
}
}
Und die Vorlage:
<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>
Meine Ausgabe ist einfach: Mein Element: undefiniert.
Wie Sie sehen, versuche ich derzeit, über die ID auf das Element zuzugreifen, habe jedoch auch versucht, den Klassennamen anzugeben. Könnte jemand mehr Details darüber liefern, was die ViewChild-Auswahlabfrage erwartet?
Ich habe auch Beispiele gesehen, in denen ein Hash-Wert '#' als Selektor-ID-Wert verwendet wird, den @ViewChild verwendet - - aber dies führt bei mir zu einem Fehler beim Parsen der Vorlage mit # gallery-container.
Ich kann mir nichts anderes vorstellen, was hier falsch sein könnte. Jede Hilfe wird gebeten, danke!
Full Code hier verfügbar:https: //github.com/aconfee/KimbyArting/tree/master/client/KimbyArting/components/portfolio-pag