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

Question

我在 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”按钮图标也可以正常工作。 任何帮助将不胜感激。

Answer 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