2016-06-18 48 views
5

Trong mẫu thành phần, tôi có một hình ảnh. Phụ thuộc vào một boolean Tôi muốn đặt một hình ảnh trên đầu trang của nó. Kết quả cuối cùng trông giống như sau: enter image description hereGóc 2 vị trí thay đổi của phần tử

Hình ảnh thứ hai là hình ảnh bộ chọn màu xanh lá cây. Để làm như vậy, tôi cần đặt hình ảnh bộ chọn phụ thuộc vào kích thước của hình ảnh tiêu đề chính. ETA: Một số hình ảnh cao hơn chiều rộng trong khi các hình ảnh khác rộng hơn thì cao. Phần bù đầu của hình ảnh bộ chọn là phụ thuộc vào chiều cao thực tế của hình ảnh tiêu đề.

Tôi có trình xử lý sự kiện cho sự kiện load của hình ảnh và khi cả hai được tải, tôi muốn thực hiện việc định vị. Cả hai hình ảnh đều có sẵn trong thành phần qua @ViewChild. Tôi đã cố gắng đặt thuộc tính offsetTopoffsetLeft của nativeElement nhưng chúng là chỉ đọc. Tôi đã xác minh rằng tôi có cả hai hình ảnh trong trình xử lý load của mình với kích thước chính xác.

Tôi có thể làm điều đó như thế nào trong chính mẫu hoặc trong trình xử lý load của tôi?

+0

Điều này không liên quan gì đến Angular. CSS tinh khiết sẽ là đủ. – dfsq

+0

Bằng cách nào? Tôi không biết kích thước của hình ảnh tiêu đề. Các khoảng bù cố định cho hình ảnh bộ chọn sẽ không hoạt động. – hholtij

+0

Đăng HTML, mà không có nó không có ý nghĩa để cố gắng đoán. – dfsq

Trả lời

9

Trong trường hợp ai đó cần một giải pháp cho một vấn đề tương tự:

tôi tính topleft vị trí (dựa vào hình ảnh tiêu đề) trong xử lý load và trong mẫu vào hình ảnh chọn tôi thêm một cái gì đó giống như [style.top]="top" [style.left]="left" (trong đó topleft là các chuỗi kết thúc bằng "px").

+0

Cảm ơn bạn về phần "px" '! –

Các vấn đề liên quan