角度 2 悬停事件更新

javascript angular events hover

2022-08-30 00:50:29

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

在Angular1中有，但似乎没有被延续。ng-Mouseover

我查看了文档，没有找到任何东西。

答案 1

如果要在任何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);
   }
}

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

答案 2

是的，在angular2中有，而不是像在angular 1.x中那样，所以你必须写这个：-on-mouseoverng-Mouseover

<div on-mouseover='over()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div>

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

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

更新

HTML 代码 -

<div (mouseover)='over()' (mouseout)='out()' style="height:100px; width:100px; background:#e2e2e2">hello mouseover</div>

控制器/。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()"