将 mouseover ad mouseleave 事件侦听器添加到 Angular 中的元素

Question

我正在尝试为我的图像添加悬停缩放功能。我按照下面创建了一个函数并尝试将其添加到 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();
    }

如何确保实现悬停功能？

Answer 1

请参考我的 stackblitz 示例，您可以在

中应用您的 zoom in/out 逻辑

mouseover/mouseout 个事件调用的方法

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

将 mouseover ad mouseleave 事件侦听器添加到 Angular 中的元素

Adding mouseover ad mouseleave Event Listener to element in Angular

zooming

angular