小编典典

Angular 2 悬停事件

all

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

Angular1 中有ng-Mouseover,但似乎没有被继承。

我浏览了文档并没有找到任何东西。


阅读 115

收藏
2022-06-08

共1个答案

小编典典

如果您想在任何 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>

零件

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

您应该同时使用mouseentermouseleave事件,以便在角度 2 中完全实现功能性悬停事件。

2022-06-08