Angular 如何同时在两个元素上检测mouseleave（）？角4

在angular4中这样做的等价物是什么？我们如何像jquery中那样添加多个元素？我在angular4中尝试设置超时，但由于某些原因无法工作。有什么想法吗

角度的

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

}

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

}

---

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

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

---

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

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

---

下面是正在运行的代码

Html

类型脚本组件

---

谢谢

这是正在运行的代码

Html

类型脚本组件

---

谢谢

我尝试了angular4中的settimeout-问题不包含这一部分。我添加了角度函数这是我的代码您可以在sharmavikramforthx测试它，但是，出于某种原因，没有显示第三个divstackbitz不能正常工作，您是说，请再检查一次我用settimeout函数更新stackbitz我用angular4尝试settimeout-问题不包含这部分。我添加了我的角度函数这是我的代码你可以在SharmavikramforThx测试它，但是，有些原因不是第三个divstackbitz不能正常工作，你说，请再检查一次，我用settimeout函数更新了stackbitz

 <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>

   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);
  }
}