时间戳

首页 > 解决方案 > 无法让 ngMouseEnter（和类似命令）正常工作

html - 无法让 ngMouseEnter（和类似命令）正常工作

问题描述

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

这是代码：

组件.html

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

组件.ts

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

...

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

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

此外，按钮图标“far fa-trash-alt”按预期工作。任何帮助，将不胜感激。

标签： htmlangulartypescriptbootstrap-4

解决方案

这就是 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>

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

推荐阅读