css - 从 HostListener 访问 HTML 元素

我有一个 HTML 元素（div），我想在鼠标进入时添加一个类，在鼠标离开时移除它（并添加另一个类）。我的 HostListeners 可以在 mouseenter/mouseleave 动作时工作，但我的问题是如何访问我的 HTML 元素并添加/移除类。

项目.html

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

item.component.ts

@Component({
           selector: 'vsc-navigation-view-menu-item',
           templateUrl: './navigation-view-menu-item.html',
           changeDetection: ChangeDetectionStrategy.OnPush
        })
    export class NavigationViewMenuItemComponent {
           @Input() menuItem: NavigatorNodeSchema;

       constructor(@Inject(forwardRef(() => NavigationViewMenuComponent)) public menuComponent: NavigationViewMenuComponent, private navigationService: NavigationService) {

       }
    @HostListener('mouseenter', ['$event'])
       onMouseEnter(evt: MouseEvent) {
          if(evt.ctrlKey){
              this.elementRef.nativeElement.class = 'remove-action';
          }
           console.log(this.menuItem.navigationTargetUid);
       }

    @HostListener('mouseleave', ['$event'])
    onMouseLeave(evt: MouseEvent) {
            this.elementRef.nativeElement.class = 'hidden-action';
    }
}

项目.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 元素呢？有什么想法吗？

答案＃1

没有 (this.relementRef as Element)....

也许你的意思是

evt.target.class

但是使用 Angular 绑定来更新类将是一种冒险。

@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;
}