2016-06-18 3 views
5

구성 요소 템플릿에 이미지가 있습니다. 부울에 따라 그 위에 다른 이미지를 배치하고 싶습니다. 최종 결과는 다음과 같습니다. enter image description here각도 2 요소의 위치 변경

두 번째 이미지는 녹색 선택 이미지입니다. 이렇게하려면 선택기 이미지를 주 제목 이미지의 크기에 따라 배치해야합니다. ETA : 일부 이미지는 너비보다 높지만 다른 이미지는 더 넓고 높습니다. 선택기 이미지의 상단 오프셋은 제목 이미지의 실제 높이에 따라 달라집니다.

이미지의 load 이벤트에 대한 이벤트 처리기가 있으며 둘 다로드 될 때 위치 지정을 수행하려고합니다. 두 이미지는 모두 @ViewChild을 통해 구성 요소에서 사용할 수 있습니다. nativeElementoffsetTopoffsetLeft 속성을 설정하려고했지만 읽기 전용입니다. 정확한 치수로 내 load 처리기의 두 이미지를 가지고 있는지 확인했습니다.

템플릿 자체 또는 내 load 처리기에서 어떻게 처리 할 수 ​​있습니까? (제목 이미지를 기반으로) 내가 top 계산

left를 위치 load 핸들러 및 선택 이미지 템플릿에 내가 [style.top]="top" [style.left]="left" 같은 것을 추가 : 경우 다른 사람에

+0

이것은 각도와는 아무런 관련이 없습니다. 순수 CSS만으로 충분할 것입니다. – dfsq

+0

어떻게? 제목 이미지의 크기를 알지 못합니다. 선택기 이미지의 고정 오프셋은 작동하지 않습니다. – hholtij

+0

HTML을 게시하면 추측하지 않는 것이 좋습니다. – dfsq

답변

9

비슷한 문제에 대한 해결책을 필요로 (여기서 topleft은 "px"로 끝나는 문자열입니다).

+0

''px ''부분을 가져 주셔서 감사합니다! –