无法让 MouseEnter（和类似命令）正常工作 [重复]

Posted 2023-05-08

【中文标题】无法让 MouseEnter（和类似命令）正常工作 [重复]

【英文标题】：Cannot get ngMouseEnter (& similar commands) to work properly [duplicate]

【发布时间】：2018-11-12 01:47:06

【问题描述】：

我在 Angular 6 上使用 Bootstrap 4，并且我有一个删除按钮，当鼠标进入按钮时应该会更改其图标。但是，我尝试了其中的几个 ng 函数（ngMouseOver、ngMouseUp 等），但都没有奏效。

代码如下：

component.html

<button type="delete" class="btn" (click)="delTr(tr)" ng- 
mouseenter="buttonHover()"><i class="ButtonIcon"></i></button>

component.ts

ButtonIcon: String = "far fa-trash-alt";

...

buttonHover()

  console.log("Mouse Enter works.") 
  this.ButtonIcon = "fas fa-trash-alt"
 

程序运行时控制台日志没有输出任何内容，所以方法buttonHover()没有被激活。

此外，“far fa-trash-alt”按钮图标也可以正常工作。 任何帮助将不胜感激。

【问题讨论】：

Look at angular-2-hover-event

【参考方案1】：

这就是 AngularJS 的方式——从你所说的来看，你使用的是 Angular(v6)，所以你应该使用 Angular 的方式：

<button type="delete" class="btn" (click)="delTr(tr)" (mouseenter)="buttonEnterHover()" (mouseleave)="buttonLeaveHover()"> YourBtn </button>

另一种选择是使用mouseover 事件：

<button type="delete" class="btn" (click)="delTr(tr)" (mouseover)="buttonHover()"> YourBtn </button>

每种方法都有其优点和缺点，这里的文档可帮助您确定哪种方法最适合您。

MDN MouseEnter Docs MDN MouseOver Docs

【讨论】：

感谢您的帮助，我在 html 中完全忘记了方法名称周围的括号。