Angular 2 悬停事件

Question

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

在 Angular1 中有 ng-Mouseover ，但似乎并没有被继承。

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

原文由 Ronin 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

原文由 Vikash Dahiya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

是的，在 angular2 中有 on-mouseover 而不是 ng-Mouseover 就像在 angular 1.x 中一样，所以你必须这样写：-

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

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

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

更新

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()"

原文由 Pardeep Jain 发布，翻译遵循 CC BY-SA 4.0 许可协议