наведите курсор на изображение, чтобы отобразить изображение большего размера рядом с ним.Угловой 7 - PullRequest
Новая
       8

наведите курсор на изображение, чтобы отобразить изображение большего размера рядом с ним.Угловой 7

0 голосов
/ 23 октября 2018

enter image description here Эй, я пытаюсь создать компонент, который действует так же, как компонент amazon.Когда у вас есть несколько изображений слева и вы наводите на них курсор, чтобы увидеть более крупное изображение рядом с ними.

Мой подход состоял в том, чтобы иметь (mouseenter) событие, которое вызывает функцию с $ event в нем.И функция устанавливает переменную {{image}}

Итак, у меня есть HTML: 

 <img width="100px;" id="div1" src="./assets/Capture.PNG" (mouseenter)="displayId($event)"/>
 <img width="100px;" id="div2" src="./assets/media.jpg" (mouseenter)="displayId($event)"/>

 <p>{{image}}</p>

, а .ts: 

displayId(event: Event){
  this.image = event.target;
}

Я знаю, что есть лучшееи простой подход. Я новичок в html, поэтому у меня не так много знаний.

Когда я пытаюсь это дает мне это.[ObectHTMLImageElement]

1 Ответ

0 голосов
/ 23 октября 2018

Вы можете использовать mouseover вместо указателя мыши 

 <img width="100px;" id="div1" src="./assets/Capture.PNG" (mouseover)="displayId($event)"/>

и в TS 

over(){
   this.image = event.target.source;
}
...