2016-06-18 23 views
5

In einer Komponentenvorlage habe ich ein Bild. Abhängig von einem booleschen Wert möchte ich ein weiteres Bild darüber legen. Das Endergebnis sieht ungefähr so ​​aus: enter image description hereAngular 2 Position des Elements ändern

Das zweite Bild ist das grüne Auswahlbild. Um dies zu tun, muss ich das Selektorbild abhängig von den Abmessungen des Haupttitelbildes platzieren. ETA: Einige Bilder sind höher als breit, während andere breiter als hoch sind. Der obere Versatz des Auswahlbildes hängt daher von der tatsächlichen Höhe des Titelbildes ab.

Ich habe einen Event-Handler für das Ereignis load der Bilder und wenn beide geladen sind, möchte ich die Positionierung tun. Beide Bilder sind in der Komponente über @ViewChild verfügbar. Ich habe versucht, die offsetTop und offsetLeft Eigenschaften der nativeElement, aber sie sind schreibgeschützt. Ich habe überprüft, dass ich beide Bilder in meinem Handler load mit den richtigen Abmessungen habe.

Wie kann ich das entweder in der Vorlage selbst oder in meinem load Handler tun?

+0

Das hat nichts mit Angular zu tun. Reines CSS wäre genug. – dfsq

+0

Wie? Ich kenne die Abmessungen des Titelbildes nicht. Fixe Offsets für das Selektorbild funktionieren nicht. – hholtij

+0

Post HTML, ohne es macht es keinen Sinn zu versuchen, zu erraten. – dfsq

Antwort

9

Falls jemand anderes muss eine Lösung für ein ähnliches Problem:

I top und left Position (basierend auf dem Titelbild) in den load Handler und in der Vorlage auf dem ausgewählten Bild berechnet ich so etwas wie [style.top]="top" [style.left]="left" hinzugefügt (wobei top und left Strings sind, die mit "px" enden).

+0

Danke für '" px "' Teil! –

Verwandte Themen