Angular 2悬停事件 [英] Angular 2 Hover event

问题描述

在新的Angular 2框架中，有没有人知道做一个像事件一样悬停的正确方法？在Angular 1中有ng-Mouseover，但似乎并没有结束。

解决方案

如果您想在任何html上执行悬停事件元素比你可以这样做。

在Html中

 < ; div（mouseenter）=mouseEnter（'div a'）（mouseleave）=mouseLeave（'div A'）> 
< h2> Div A< / h2> 
< / div> 
< div（mouseenter）=mouseEnter（'div b'）（mouseleave）=mouseLeave（'div B'）> 
< h2> Div B< / h2> 
< / div> 
  

现在在组件中

 从'@ angular / core'导入{Component}; 
 
 @Component（{
 moduleId：module.id，
 selector：'basic-detail'，
 templateUrl：'basic.component.html'，
 $）
 export class BasicComponent {
 
 mouseEnter（div：string）{
 console.log（mouse enter：+ div）; 
} 
 
 mouseLeave（div：string）{
 console.log（'mouse leave：'+ div）; 
 
 
 
 
 $ b你应该同时使用mouseenter和mouseleave事件来实现角度为2的全功能悬停事件。 
In the new Angular 2 framework, does anyone know the proper way to do a hover like event? In Angular 1 there was ng-Mouseover, but that doesn't seem to have been carried over. I've looked through the docs and haven't found anything.
解决方案
if you want to perform hover like event on any html element than you can do like this.

In Html
 <div (mouseenter) ="mouseEnter('div a') "  (mouseleave) ="mouseLeave('div A')">
        <h2>Div A</h2>
 </div> 
 <div (mouseenter) ="mouseEnter('div b')"  (mouseleave) ="mouseLeave('div B')">
        <h2>Div B</h2>
 </div>
Now in component
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'basic-detail',
    templateUrl: 'basic.component.html',
})
export class BasicComponent{

   mouseEnter(div : string){
      console.log("mouse enter : " + div);
   }

   mouseLeave(div : string){
     console.log('mouse leave :' + div);
   }
}
You should use both mouseenter and mouseleave events inorder to implement fully functional hover event in angular 2.

                        
这篇关于Angular 2悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！