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

问题描述

在新的 Angular2 框架中，有没有人知道像事件一样进行悬停的正确方法?

在Angular1 中有ng-Mouseover，但这似乎没有被继承.

我已经浏览了文档，但没有找到任何东西.

解决方案

如果你想在任何 HTML 元素上执行类似悬停的事件，那么你可以这样做.

HTML

 <div (mouseenter) ="mouseEnter('div a') "(mouseleave) =mouseLeave('div A')"><h2>Div A</h2>

<div (mouseenter) ="mouseEnter('div b')";(mouseleave) =mouseLeave('div B')"><h2>Div B</h2>

组件

import { Component } from '@angular/core';@零件({模块 ID:module.id，选择器:'基本细节'，templateUrl: 'basic.component.html',})导出类 BasicComponent{鼠标输入(div:字符串){console.log("鼠标输入:"+ div);}鼠标离开(div:字符串){console.log('鼠标离开:' + div);}}

您应该同时使用 mouseenter 和 mouseleave 事件，以便在 angular 2 中完全实现功能性悬停事件.

In the new Angular2 framework, does anyone know the proper way to do a hover like an event?

In Angular1 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 a hover like event on any HTML element, then you can do it like this.

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>

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 in order to fully implement functional hover events in angular 2.

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