Question

我有一个弹出的登录框，当有人将鼠标悬停在特定图标上时会显示该框。如何在Angular应用程序中使其变得触摸屏友好？

这是我组件的逻辑：

private isPopupDisplayed: boolean = false;

mouseOver(event) {
    this.isPopupDisplayed = true;
    // console.log(`mouseOver ${this.isPopupDisplayed}`);

}

mouseLeave(event) {
    this.isPopupDisplayed = false;
    // console.log(`mouseLeave ${this.isPopupDisplayed}`);
}

Answer 1

对于触摸设备，您应该通过click events

处理它

component.html

<button (click)="onClick()">Sign in</button>

和您的component.ts

onClick() {
  console.log('clicked');
  this.showPopup = true;
}

要回答您在弹出区域外单击时关闭弹出窗口的评论，以下是有关如何执行此操作的粗略代码。基本上，您侦听页面上的单击事件，并检查目标元素是否与弹出窗口匹配。

@ViewChild('popup') popup;

constructor() {
  document.addEventListener('click', this.clickOutside);
}

clickOutside(event:any) {
        // checks if the popup element matches the selected click element on the page 
        if (!this.popup.nativeElement.contains(event.target)) {
             // hides popup 
            this.popup.nativeElement.style.display = 'none';
        }
    }

如何在Angular应用程序中使CSS悬停效果触摸屏友好？

1 个答案: