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