Angular 2 鼠标悬停事件

44 浏览
0 Comments

Angular 2 鼠标悬停事件

在新的Angular2框架中，有人知道如何正确地实现鼠标悬停事件吗？

在Angular1中有ng-Mouseover，但似乎没有这个功能了。

我查看了文档但没有找到相关内容。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

在Angular2中，有on-mouseover，而不是类似于Angular 1.x中的ng-Mouseover，因此你需要编写如下代码:-

hello mouseover
over(){
    console.log("Mouseover called");
  }

正如@Gunter在评论中建议的那样，我们还可以使用on-mouseover的替代方法。一些人更喜欢使用前缀为on的替代方法，称为规范形式。

更新

HTML代码 -

hello mouseover

控制器/.TS代码 -

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  over(){
    console.log("Mouseover called");
  }
  out(){
    console.log("Mouseout called");
  }
}

工作示例

在Angular中还可以使用其他鼠标事件 -

(mouseenter)="myMethod()"
(mousedown)="myMethod()"
(mouseup)="myMethod()"

0
0 Comments

如果你想在任何HTML元素上执行悬停事件，可以像这样做。

HTML

 
        
Div A

        
Div B

组件

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

为了完整实现Angular 2中的功能悬停事件，应该使用mouseenter和mouseleave事件。

0