从HostListener访问HTML元素

我有一个html项目（div），我想在mouseEnter上为它添加一个类，并在mouseLeave上删除它（添加另一个）。我让我的HostListeners处理mouseenter/mouseleave操作，但我的问题是如何访问我的html元素并添加/删除类

item.html

<div clrDropdownItem class="hidden-action">
    <span class="vui-icon" [ngClass]="menuItem.icon"></span>
    <span [textContent]="menuItem.title"></span>
</div> 

item.css

.hidden-action {
  text-decoration: none !important;
}

.remove-action {
  text-decoration: line-through !important;
  text-decoration-color: red !important;
}

通过这段代码，我得到：

类型上不存在属性'elementRef' “NavigationViewMenuItemComponent”

现在我知道“this”指的是我的ts元素，而不是html元素，但是如何从hostListener中访问div元素呢？有什么想法吗？

没有

（此.relementRef作为元素）…

也许你的意思是

evt.target.class

但使用角度绑定来更新类是一种赌博

@HostBinding('class.remove-action')
isRemoveAction = false;

@HostBinding('class.hidden-action')
isHiddenAction = false;

@HostListener('mouseenter', ['$event'])
   onMouseEnter(evt: MouseEvent) {
      if(evt.ctrlKey){
          this.isRemoveAction = true;
      }
       console.log(this.menuItem.navigationTargetUid);
   }

@HostListener('mouseleave', ['$event'])
onMouseLeave(evt: MouseEvent) {
   this.isHiddenAction = true;
}

---

您需要强制转换

（evt.target as Element）.classList.add（…）

或类似于hostBinding我得到的信息：“错误：@hostBinding参数应该是属性名，'class.'或'attr..”抱歉，

@hostBinding（…）

中的

[]

是多余的。

@HostBinding('class.remove-action')
isRemoveAction = false;

@HostBinding('class.hidden-action')
isHiddenAction = false;

@HostListener('mouseenter', ['$event'])
   onMouseEnter(evt: MouseEvent) {
      if(evt.ctrlKey){
          this.isRemoveAction = true;
      }
       console.log(this.menuItem.navigationTargetUid);
   }

@HostListener('mouseleave', ['$event'])
onMouseLeave(evt: MouseEvent) {
   this.isHiddenAction = true;
}