Question

在angular4中如何或等同于做这样的事情？我们如何在jquery中添加多个元素？我在angular4中尝试settimeout，但由于某种原因不起作用。有什么想法吗？

            var count = 0;
            var tolerance = 500;
            $('#d1, #d2').mouseenter(function(){
                count++;
                $('#d3').show();
            }).mouseleave(function(){
                count--;
                setTimeout(function () {
                    if (!count) {
                    $('#d3').hide();
                    }
                }, tolerance);
            });

以角度

isMouseEnter(e:number){
    this.dropdownId = e;
    this.toogleDropdown = true;

}

hideDropdown(){
    setTimeout(() => {
        if(!this.overElement){
            this.toogleDropdown = false;
        }
        else{
            this.toogleDropdown = true;
        }
    }, 100);

}

Answer 1

以下是正在运行的代码sample example

Html

 <div id="d1" (mouseenter)="mouseEnter('A')" (mouseleave)="mouseLeave('A')">div 1</div>
<div id="d2" (mouseenter)="mouseEnter('B')" (mouseleave)="mouseLeave('B')">div 2</div>
<div id="d3" [ngClass] ="{'hideDiv': div3}">
  div 3
</div>

CSS

   p {
  font-family: Lato;
}
#d1 {
    width: 250px;
    height: 200px;
    background: red;
    display: block;
}

#d2 {
    width: 250px;
    height: 200px;
    background: blue;
    position: absolute;
    top: 150px;
    left: 150px;
    display: block;
}

#d3 {
    position: absolute;
    top: 400px;
    background: green;
    width: 100px;
    height: 100px;
}
.hideDiv {
  display: none;
}

打字稿组件

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
 div3: boolean = true;
  public mouseLeave(type) {
      if(type == 'A' || type == 'B') {
        this.showDiv(true);
      }
  }

  public mouseEnter(flag) {
    if(flag == 'A' || flag == 'B') {
        this.showDiv(false);
      }
  }

  public showDiv(flag) {
    setTimeout(() => {
      this.div3 = flag;
        }, 100);
  }
}

由于

Answer 2

我建议你使用@HostListener然后使用$ event.target来区分你的两个元素：

@HostListener('mouseleave', ['$event.target'])
onLeave(): void {
  // Use your $event.target to differentiate the elements, then do actions
  // based on this.
}

如何一次检测两个元素上的mouseleave（）？ Angular4

2 个答案: