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()未被激活。

此外，按钮图标＆＃34;远fa-trash-alt＆＃34;按预期工作。任何帮助将不胜感激。

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>

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