html - 从 HostListener 访问 HTML 元素

Question

我有一个 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.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;
}

通过这段代码我得到:

"Property 'elementRef' does not exist on type 'NavigationViewMenuItemComponent'"

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

Answer 1

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

也许你的意思是

evt.target.class

但它会打赌使用 Angular 绑定(bind)来更新类。

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