Добавление mouseover и mouseleave Event Listener к элементу в Angular - PullRequest
Новая
       51

Добавление mouseover и mouseleave Event Listener к элементу в Angular

0 голосов
/ 13 января 2020

Я пытаюсь добавить функцию увеличения при наведении на мои изображения. Я создал функцию, как показано ниже, и попытался добавить ее к ngOnInit() {}, но эта функция не работает. 

@Component({
    selector: 'app-image',
    templateUrl: './image.component.html',
    styleUrls: ['./image.component.scss']
})
export class ImageComponent extends BaseComponent implements OnInit, OnDestroy {
    constructor() { }
    super();
    this.toggleImageZoom();
}

    toggleImageZoom() {
        Array.prototype.slice.call(document.getElementsByClassName('center')).forEach(element => {
            element.addEventListener('mouseenter', function(e) {
                this.classList.add('sample-image-large');
            });
            element.addEventListener('mouseleave', function(e) {
                this.classList.remove('sample-image-large');
            });
        });
    }

    ngOnInit() {
        this.init();
        this.toggleImageZoom();
    }

Как обеспечить реализацию функции наведения мыши?

1 Ответ

2 голосов
/ 13 января 2020

Пожалуйста, обратитесь к моему примеру с stackbliz, вы можете применить свои логи увеличения / уменьшения c внутри

методы, вызываемые событиями mouseover / mouseout

https://stackblitz.com/edit/angular-xenpxt

...