Acces HTML-Element von HostListener

Question

Ich habe ein HTML-Element (div), die ich hinzufügen möchte eine Klasse auf MouseEnter und entfernen Sie es (fügen Sie ein weiteres) auf mouseLeave. Ich habe meinen HostListeners mit den MouseEnter-/mouseleave Aktionen arbeiten, aber mein Problem ist, wie mein html-Element zuzugreifen und hinzufügen/entfernen die Klassen ..

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

item.css

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

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

Mit diesem Code erhalte ich:

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

Jetzt bekomme ich, dass „dies“ zu meinem ts Element beziehen, nicht der HTML-Code ein, aber wie kann ich das div-Element von innerhalb meiner hostListener? Irgendwelche Ideen?

Answer 1

Es gibt keine (this.relementRef as Element)....

Vielleicht bedeutete Sie

evt.target.class 

aber es würde Wetten werden Angular Bindungen verwenden Klassen zu aktualisieren.

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